資訊專欄INFORMATION COLUMN
摘要：很長時間沒有更新文章了，經(jīng)過幾個月的時間，事情終于忙完了。今天，在這里為大家分享款特效插件，與其說是分享，不如說是為了方便使用，對前面章節(jié)的一些效果的封裝。前面的文章在我修改完善后會逐漸上傳。
很長時間沒有更新文章了，經(jīng)過幾個月的時間，事情終于忙完了。今天，在這里為大家分享3款canvas特效插件，與其說是分享，不如說是為了方便使用，對前面章節(jié)的一些效果的封裝。
1. Martrix.js點擊查看DEMO | GIthub地址
API| 屬性 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| 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| 屬性 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| cW | Number | 1367 | canvas寬度 |
| cH | Number | 500 | canvas高度 |
| numDot | Number | 100 | 粒子數(shù)目 |
| radDot | Number | 3 | 粒子半徑 |
| isRangeRad | Boolean | true | 是否隨機(jī)粒子半徑（給定的radDot范圍內(nèi)） |
| dotColor | String | ”#FFFFFF“ | 粒子填充顏色 |
| lineDist | Number | 75 | 連線距離 |
| lineColor | String | "#FFFFFF" | 連線顏色 |
| bounce | Number | 1 | 反彈系數(shù) |
| opacity | Number | 0.5 | 透明度 |
| isTouch | Boolean | false | 是否與鼠標(biāo)發(fā)生交互 |
| vxRange | Number | 2 | 粒子x方向速度 |
| vyRange | Number | 2 | 粒子y方向速度 |
| isWallCollisionTest | Boolean | true | 是否與邊界碰撞檢測 |
| isBallCollisionTest | Boolean | true | 球體間是否發(fā)生碰撞檢測 |
具體使用方法請看Github文檔
3.waterWave.js點擊查看DEMO | GIthub地址
API| 屬性 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| cW | Number | 1367 | canvas寬度 |
| cH | Number | 500 | canvas高度 |
| baseY | Number | 150 | 液面高度 |
| oneColor | String | "#6ca0f6" | 上層顏色 |
| twoColor | String | "#367aec" | 下層顏色 |
| vertexsNum | Number | 250 | 頂點數(shù)目 |
| autoDiff | Number | 1000 | 初始浪高 |
| isMouseWhell | Boolean | true | 是否支持滾輪滾動 |
| isDrop | Boolean | true | 是否來個雨滴 |
| dropRadius | Number | 3 | 雨滴半徑 |
| dropLocation | Number | 500 | 雨滴位置 |
| isShowTips | Boolean | true | 是否顯示提示 |
具體使用方法請看Github文檔
4.結(jié)語今天的分享就到這里，后面會分享跟多的canvas特效插件。前面的文章在我修改完善后會逐漸上傳。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86656.html
摘要：注以下所有代碼托管到動畫的數(shù)理分析有了前面的基礎(chǔ)知識，現(xiàn)在我們就會想如果我們能夠在每秒幀，內(nèi)渲染張圖像，并且每一張圖像的內(nèi)容發(fā)生微調(diào)，那么在秒鐘整個畫面就會產(chǎn)生動畫效果了。 什么是動畫？ 就像思考哲學(xué)問題無法回避思維和存在的關(guān)系一樣，制作動畫同樣無法逃避的問題是動畫的原理是什么？這里提一句題外話，任何原理的東西通常難以讓你短期拾掇成果，但在隱約的未來會起到難以置信的效果，不信就看接下來...
摘要：模擬飛機(jī)航班線路動畫一款基于的飛機(jī)航班線路模擬動畫，它模擬了許多航班在不同目的地的起飛降落數(shù)量。跳動加載動畫可調(diào)節(jié)參數(shù)這是一款基于的跳動加載動畫，它的另一個特點是可以動態(tài)調(diào)節(jié)動畫參數(shù)。 showImg(https://segmentfault.com/img/bVblze6?w=900&h=383); HTML5 動畫在Canvas 上得到了充分的發(fā)揮，我們 VIP 視頻也分享過很多相...
閱讀 1959·2021-11-24 11:16
閱讀 3292·2021-09-10 10:51
閱讀 3268·2021-08-03 14:03
閱讀 1294·2019-08-29 17:03
閱讀 3279·2019-08-29 12:36
閱讀 2269·2019-08-26 14:06
閱讀 522·2019-08-23 16:32
閱讀 2755·2019-08-23 13:42
