《每周一点canvas动画》——canvas特效插件

很长时间没有更新文章了，经过几个月的时间，事情终于忙完了。今天，在这里为大家分享3款canvas特效插件，与其说是分享，不如说是为了方便使用，对前面章节的一些效果的封装。

1. Martrix.js

点击查看DEMO | GIthub地址

API

属性	类型	默认值	描述
cW	Number	1367	canvas宽度
cH	Number	700	canvas高度
wordColor	String	'#33ff33'	文字颜色
fontSize	Number	15	文字大小
speed	Number	0.13	下落速度
words	String	”0123456...“	显示文字

具体使用方法请看Github文档

2. Dot.js

文字粒子特效插件，所用的都是前面所讲的知识

点击查看DEMO | GIthub地址

API

属性	类型	默认值	描述
cW	Number	1367	canvas宽度
cH	Number	500	canvas高度
numDot	Number	100	粒子数目
radDot	Number	3	粒子半径
isRangeRad	Boolean	true	是否随机粒子半径（给定的radDot范围内）
dotColor	String	”#FFFFFF“	粒子填充颜色
lineDist	Number	75	连线距离
lineColor	String	"#FFFFFF"	连线颜色
bounce	Number	1	反弹系数
opacity	Number	0.5	透明度
isTouch	Boolean	false	是否与鼠标发生交互
vxRange	Number	2	粒子x方向速度
vyRange	Number	2	粒子y方向速度
isWallCollisionTest	Boolean	true	是否与边界碰撞检测
isBallCollisionTest	Boolean	true	球体间是否发生碰撞检测

具体使用方法请看Github文档

3.waterWave.js

点击查看DEMO | GIthub地址

API

属性	类型	默认值	描述
cW	Number	1367	canvas宽度
cH	Number	500	canvas高度
baseY	Number	150	液面高度
oneColor	String	"#6ca0f6"	上层颜色
twoColor	String	"#367aec"	下层颜色
vertexsNum	Number	250	顶点数目
autoDiff	Number	1000	初始浪高
isMouseWhell	Boolean	true	是否支持滚轮滚动
isDrop	Boolean	true	是否来个雨滴
dropRadius	Number	3	雨滴半径
dropLocation	Number	500	雨滴位置
isShowTips	Boolean	true	是否显示提示

具体使用方法请看Github文档

4.结语

今天的分享就到这里，后面会分享跟多的canvas特效插件。前面的文章在我修改完善后会逐渐上传。