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