資訊專欄INFORMATION COLUMN
摘要：很長時間沒有更新文章了，經過幾個月的時間，事情終于忙完了。今天，在這里為大家分享款特效插件，與其說是分享，不如說是為了方便使用，對前面章節的一些效果的封裝。前面的文章在我修改完善后會逐漸上傳。
很長時間沒有更新文章了，經過幾個月的時間，事情終于忙完了。今天，在這里為大家分享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特效插件。前面的文章在我修改完善后會逐漸上傳。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86656.html
摘要：注以下所有代碼托管到動畫的數理分析有了前面的基礎知識，現在我們就會想如果我們能夠在每秒幀，內渲染張圖像，并且每一張圖像的內容發生微調，那么在秒鐘整個畫面就會產生動畫效果了。 什么是動畫？ 就像思考哲學問題無法回避思維和存在的關系一樣，制作動畫同樣無法逃避的問題是動畫的原理是什么？這里提一句題外話，任何原理的東西通常難以讓你短期拾掇成果，但在隱約的未來會起到難以置信的效果，不信就看接下來...
摘要：模擬飛機航班線路動畫一款基于的飛機航班線路模擬動畫，它模擬了許多航班在不同目的地的起飛降落數量。跳動加載動畫可調節參數這是一款基于的跳動加載動畫，它的另一個特點是可以動態調節動畫參數。 showImg(https://segmentfault.com/img/bVblze6?w=900&h=383); HTML5 動畫在Canvas 上得到了充分的發揮，我們 VIP 視頻也分享過很多相...
閱讀 1894·2021-11-24 11:16
閱讀 3257·2021-09-10 10:51
閱讀 3180·2021-08-03 14:03
閱讀 1261·2019-08-29 17:03
閱讀 3238·2019-08-29 12:36
閱讀 2219·2019-08-26 14:06
閱讀 493·2019-08-23 16:32
閱讀 2662·2019-08-23 13:42
