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 } 注意事项该插件不需要使用高分辨率的图片。 图像必须放在相同域名的服务器上,由于安全原因,跨域名的图片不能再canvas中使用,查看Security with canvas elements。 Smaller dots = lots more dots = poorer browser performance. 由于Firefox和IE浏览器不支持合成黑色,所以这些浏览器将使用channels: [ 'lum' ]简单的回退为黑白色。 |