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




本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/particle-effect.html)

分享到:

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
关注w3cmark
微信公众号 w3cmark_com