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

怼烎@ 2022-02-22 13:08 577阅读 0赞

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

### 1. Martrix.js ###

![图片描述][765163869-586217c8804df_articlex]

[点击查看DEMO][DEMO] | [GIthub地址][GIthub]

#### API ####

具体使用方法请看Github文档

### 2. Dot.js ###

文字粒子特效插件，所用的都是前面所讲的知识  
![图片描述][617260669-586217e3e66eb_articlex]

[点击查看DEMO][DEMO 1] | [GIthub地址][GIthub 1]

#### API ####

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

具体使用方法请看Github文档

### 3.waterWave.js ###

![图片描述][982108188-5862180781d1e_articlex]

[点击查看DEMO][DEMO 2] | [GIthub地址][GIthub 2]

#### API ####

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

具体使用方法请看Github文档

### 4.结语 ###

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

[765163869-586217c8804df_articlex]: /images/20220222/c001627385de455f8ad17682d520bb75.png
[DEMO]: http://codepen.io/supperjet/pen/JbqZPK
[GIthub]: https://github.com/supperjet/Martrix.js
[617260669-586217e3e66eb_articlex]: /images/20220222/4b86887a63ab4ff4ac0d05f991c2eebe.png
[DEMO 1]: http://codepen.io/supperjet/pen/vyMKWO
[GIthub 1]: https://github.com/supperjet/Dot
[982108188-5862180781d1e_articlex]: https://image-static.segmentfault.com/982/108/982108188-5862180781d1e_articlex
[DEMO 2]: http://codepen.io/supperjet/pen/LboKLg
[GIthub 2]: https://github.com/supperjet/waterWave.js