HTML5 canvas粒子生成人物面部轮廓插件

发布时间：2019/06/30 来源：互联网浏览：关键词：HTML5 canvas 粒子动画

简要教程

这是一款使用js制作的html5 canvas粒子生成人物面部轮廓插件。该js插件可以扫描图片中的人物面部阴暗和高亮面，并生成canvas也能够圆点来描绘出脸部轮廓。还可以用鼠标来和粒子进行互动。

使用方法

首先在页面中引入breathing-halftone.pkgd.js文件。然后按下面方法调用插件：

// 获取图片
// 通过jquery
varimg = $('#hero img')[0];
// 或者纯JS
varimg = document.querySelector('#hero img');
 
// 初始化创建
newBreathingHalftone( img, {
  // options...
});

可以通过jQuery来获取图片，前提是引入了jQuery文件。也可以使用纯js来获取。如果浏览器不支持<canvas>将回退为原始图片。

可以使用data-src属性来指定不同的图片源。你可以将它作为一个格式化的图片源。

<img src="portrait-dots.png"data-src="portrait.jpg"/>

可用参数

该canvas粒子插件提供了一组可用的参数：

// default options
{
  // ----- dot size ----- //
 
  dotSize: 1/40,
  // size of dots
  // as a fraction of the diagonal of the image
  // smaller dots = more dots = poorer performance
 
  dotSizeThreshold: 0.05,
  // hides dots that are smaller than a percentage
 
  initVelocity: 0.02,
  // speed at which dots initially grow
 
  oscPeriod: 3,
  // duration in seconds of a cycle of dot size oscilliation or 'breathing'
 
  oscAmplitude: 0.2
  // percentage of change of oscillation
 
  // ----- color & layout ----- //
 
  isAdditive:false,
  // additive is black with RGB dots,
  // subtractive is white with CMK dots
 
  isRadial:false,
  // enables radial grid layout
 
  channels: ['red','green','blue'],
  // layers of dots
  // 'lum' is another supported channel, for luminosity
 
  isChannelLens:true,
  // disables changing size of dots when displaced
 
  // ----- behavior ----- //
 
  friction: 0.06,
  // lower makes dots easier to move, higher makes it harder
 
  hoverDiameter: 0.3,
  // size of hover effect
  // as a fraction of the diagonal of the image
 
  hoverForce: -0.02,
  // amount of force of hover effect
  // negative values pull dots in, positive push out
 
  activeDiameter: 0.6,
  // size of click/tap effect
  // as a fraction of the diagonal of the image
 
  activeForce: 0.01
  // amount of force of hover effect
  // negative values pull dots in, positive push out
}