ParticleEffect——canvas粒子效果组件
2016-09-08 14:36
573 查看
前言
1、本组件可以实现飘雪、下雨、花瓣、星火等粒子效果;
2、demo地址后面加上参数`?fps=1` 可以在页面左上角显示当前的fps状态;
3、组件有加入canvas支持判断,pc、移动都可以用
效果截图
栗子一
DEMO地址:http://www.w3cmark.com/demo/particle-effect.html
HTML
JS
栗子二
DEMO地址:http://www.w3cmark.com/demo/particle-effect2.html
(ps:目前组件只支持一张图片的形式,只需要在canvas标签里面插入img标签即可。如果图片存在,会优先使用图片)
HTML
JS
参数
Github地址:https://github.com/w3cmark/ParticleEffect
1、本组件可以实现飘雪、下雨、花瓣、星火等粒子效果;
2、demo地址后面加上参数`?fps=1` 可以在页面左上角显示当前的fps状态;
3、组件有加入canvas支持判断,pc、移动都可以用
效果截图
栗子一
DEMO地址:http://www.w3cmark.com/demo/particle-effect.html
HTML
DEMO地址:http://www.w3cmark.com/demo/particle-effect2.html
(ps:目前组件只支持一张图片的形式,只需要在canvas标签里面插入img标签即可。如果图片存在,会优先使用图片)
HTML
第一个参数 | 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) | 选填 |
相关文章推荐
- Particles.js基于Canvas画布创建粒子原子颗粒效果
- canvas简单的粒子效果的实现
- canvas实现粒子时钟效果
- canvas动画之文字粒子效果
- 基于HTML5 Canvas生成粒子效果的人物头像
- HTML5 canvas创建粒子效果
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
- HTML5 Canvas生成粒子效果的人物头像
- canvas实现网站粒子进度条效果
- 基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
- canvas绘图粒子扩散效果【原创】
- 微信小程序小组件:仿直播点赞气泡效果,基于Canvas
- canvas实现粒子涂鸦效果
- 使用particles.js实现知乎首页Canvas粒子效果,多边形,圆形粒子
- 基于HTML5 Canvas生成粒子效果的人物头像
- canvas粒子雪花效果
- 用html5 canvas写的一个图片粒子效果加载的demo
- HTML5组件Canvas实现图像灰度化(步骤+实例效果)
- 微信小程序小组件 基于Canvas实现直播点赞气泡效果
- 基于HTML5 Canvas粒子效果文字动画特效