摘要：很长时间没有更新文章了，经过几个月的时间，事情终于忙完了。今天，在这里为大家分享款特效插件，与其说是分享，不如说是为了方便使用，对前面章节的一些效果的封装。前面的文章在我修改完善后会逐渐上传。
很长时间没有更新文章了，经过几个月的时间，事情终于忙完了。今天，在这里为大家分享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特效插件。前面的文章在我修改完善后会逐渐上传。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86656.html
摘要：注以下所有代码托管到动画的数理分析有了前面的基础知识，现在我们就会想如果我们能够在每秒帧，内渲染张图像，并且每一张图像的内容发生微调，那么在秒钟整个画面就会产生动画效果了。 什么是动画？ 就像思考哲学问题无法回避思维和存在的关系一样，制作动画同样无法逃避的问题是动画的原理是什么？这里提一句题外话，任何原理的东西通常难以让你短期拾掇成果，但在隐约的未来会起到难以置信的效果，不信就看接下来...
摘要：模拟飞机航班线路动画一款基于的飞机航班线路模拟动画，它模拟了许多航班在不同目的地的起飞降落数量。跳动加载动画可调节参数这是一款基于的跳动加载动画，它的另一个特点是可以动态调节动画参数。 showImg(https://segmentfault.com/img/bVblze6?w=900&h=383); HTML5 动画在Canvas 上得到了充分的发挥，我们 VIP 视频也分享过很多相...
阅读 1893·2021-11-24 11:16
阅读 3257·2021-09-10 10:51
阅读 3179·2021-08-03 14:03
阅读 1261·2019-08-29 17:03
阅读 3238·2019-08-29 12:36
阅读 2218·2019-08-26 14:06
阅读 492·2019-08-23 16:32
阅读 2660·2019-08-23 13:42
