ParticleEffect——canvas粒子效果组件
来源:互联网 发布:货代软件哪家好 编辑:程序博客网 时间:2024/06/08 07:30
前言
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
0 0
- ParticleEffect——canvas粒子效果组件
- canvas 的粒子效果
- canvas粒子雪花效果
- 基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
- HTML5 canvas创建粒子效果
- canvas实现粒子涂鸦效果
- Swift——粒子效果
- canvas动画之文字粒子效果
- <canvas>有意思的的粒子效果
- canvas简单的粒子效果的实现
- iOS粒子效果模拟器—UIEffectDesigner
- js学习—在canvas画布上的粒子扩散
- canvas粒子
- Unity3D学习笔记——组件之Effects(效果/特效)——Particle System(粒子系统)
- 使用particles.js实现知乎首页Canvas粒子效果,多边形,圆形粒子
- FLEX窗器类组件——CANVAS
- 微信小程序Canvas增强组件—WeZRender
- Unity3D学习(8)——粒子效果的实现
- android lambda语法简述
- JAVA学习之初
- 正益工作能担起PaaS+SaaS的未来探索吗?
- As3 通过绘制多张位图合并成一个超大的位图
- Java7的try新功能
- ParticleEffect——canvas粒子效果组件
- 图像融合(二)-- 简单加权融合
- Javascript的with语句
- ORA-20200
- Linux目录的权限
- Memcached特性及优缺点
- eclipse上运行spark程序
- Android封装ShareSDK分享功能
- 图像融合(三)-- 拉普拉斯金字塔