html5游戏制作人物原图,HTML5 canvas粒子生成人物面部轮廓插件

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

使用方法

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

// 获取图片

// 通过jquery

var img = $('#hero img')[0];

// 或者纯JS

var img = document.querySelector('#hero img');

// 初始化创建

new BreathingHalftone( img, {

// options...

});

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

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

可用参数

该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

}

注意事项

该插件不需要使用高分辨率的图片。

图像必须放在相同域名的服务器上，由于安全原因，跨域名的图片不能再canvas中使用，查看Security with canvas elements。

Smaller dots = lots more dots = poorer browser performance.

由于Firefox和IE浏览器不支持合成黑色，所以这些浏览器将使用channels: [ 'lum' ]简单的回退为黑白色。