《每週一點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特效插件。前面的文章在我修改完善後會逐漸上傳。