当前位置：首页 > 网页特效 > canvas

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

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

简介

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

```javascript
// 获取图片
// 通过jquery
var img = $('#hero img')[0];
// 或者纯JS
var img = document.querySelector('#hero img');
 
// 初始化创建
new BreathingHalftone( img, {
  // options...
});
```
可以通过jQuery来获取图片，前提是引入了jQuery文件。也可以使用纯js来获取。如果浏览器不支持canvas将回退为原始图片。

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

```javascript
<img src="portrait-dots.png" data-src="portrait.jpg" />
```
##### 可用参数
该canvas粒子插件提供了一组可用的参数：

```javascript
// 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' ]简单的回退为黑白色。