ParticleEffect——canvas粒子效果组件

前言

1、本组件可以实现飘雪、下雨、花瓣、星火等粒子效果；

2、demo地址后面加上参数`?fps=1` 可以在页面左上角显示当前的fps状态；

3、组件有加入canvas支持判断，pc、移动都可以用

效果截图

栗子一

DEMO地址：http://www.w3cmark.com/demo/particle-effect.html

HTML

< canvas  class = "snow-canvas"  id = "Jcanvas" ></ canvas > < script  charset = "utf-8"  type = "text/javascript"  src = "http://www.w3cmark.com/demo/js/jquery-1.11.0.min.js" ></ script > < script  charset = "utf-8"  type = "text/javascript"  src = "http://www.w3cmark.com/demo/js/ParticleEffect.js" ></ script >

JS

$( '#Jcanvas' )[0].width = 1900; $( '#Jcanvas' )[0].height = 1000; ParticleEffect.create( '#Jcanvas' );

栗子二

DEMO地址：http://www.w3cmark.com/demo/particle-effect2.html

（ps：目前组件只支持一张图片的形式，只需要在canvas标签里面插入img标签即可。如果图片存在，会优先使用图片）

HTML

< canvas  class = "snow-canvas"  id = "Jcanvas" >      < img  src = "img/snow.png"  class = "hide" > </ canvas > < script  charset = "utf-8"  type = "text/javascript"  src = "http://www.w3cmark.com/demo/js/jquery-1.11.0.min.js" ></ script > < script  charset = "utf-8"  type = "text/javascript"  src = "http://www.w3cmark.com/demo/js/ParticleEffect.js" ></ script >

JS

$( '#Jcanvas' )[0].width = 1900; $( '#Jcanvas' )[0].height = 1000; ParticleEffect.create( '#Jcanvas' ,{      startPoint:  '1900,-100' ,  //【选填】起点坐标，默认是画布的中心      image:  'img/snow.png' ,  //【选填】粒子图片，切图时请切正方形（默认为空）      direction:  '-1, 1'  , //【选填】x，y方向，用正负1来代表方向(默认为(0,0)随机方向)      speed:  '10'  ,  //【选填】粒子速度（默认为2）      size:  '25' ,  //【选填】粒子大小(默认为2)      count:  '5'  //【选填】粒子数量级，默认为5（0-10） });

参数

第一个参数	canvas容器DOM	必填
startPoint	粒子起点坐标，默认是画布的中心	选填
direction	粒子x，y方向，用正负1来代表方向(默认为(0,0)随机方向	选填
speed	粒子速度（默认为2）	选填
size	粒子大小（默认为2）	选填
count	粒子数量级，默认为5（0-10）	选填
startColor	粒子渐变色的起始值，粒子不是图片时生效（默认值rgba(255,255,255,1)）	选填
endColor	粒子渐变色的结束值,粒子不是图片时生效（默认值rgba(255,255,255,0.3)	选填

Github地址：https://github.com/w3cmark/ParticleEffect