这是一款使用js制作的html5 canvas粒子生成人物面部轮廓插件。该js插件可以扫描图片中的人物面部阴暗和高亮面，并生成canvas也能够圆点来描绘出脸部轮廓。还可以用鼠标来和粒子进行互动。
使用方法
首先在页面中引入breathing-halftone.pkgd.js文件。然后按下面方法调用插件：
// 获取图片// 通过jqueryvar img = $('#hero img')[0];// 或者纯JSvar img = document.querySelector('#hero img');// 初始化创建new BreathingHalftone( 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} |
注意事项
该插件不需要使用高分辨率的图片。
图像必须放在相同域名的服务器上，由于安全原因，跨域名的图片不能再canvas中使用，查看Security with canvas elements。
Smaller dots = lots more dots = poorer browser performance.
由于Firefox和IE浏览器不支持合成黑色，所以这些浏览器将使用channels: [ 'lum' ]简单的回退为黑白色。
网盘下载密码：jc8d
