浙江 杭州

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

系统分类: 网页特效 - html5 - html5模板 2015-09-19

人气11560

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       这是一款使用js制作的HTML5 canvas粒子生成人物面部轮廓插件。该js插件可以扫描图片中的人物面部阴暗和高亮面,并生成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来获取。如果浏览器不支持<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' ]简单的回退为黑白色。

查看演示
下载资源:7
下载资源
错误提交:

格式:zip 大小:251.89KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1126.html 非特殊说明,本文版权归原作者所有,转载请注明出处
HTML5 canvas粒子生成人物面部轮廓插件

我当前G币余额:0 已下载次数:7

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有1 评论)