canvas简单的粒子移动

canvas - 简单的粒子移动

在公司，做了下面一个canvas动画玩儿玩儿。
1、效果示例请戳：https://hswlian.github.io/JavaScript-blog/%E7%B2%92%E5%AD%90%E5%8C%96-%E6%A1%88%E4%BE%8B/index.html
2、对js实现封装，以便下次直接调用。暴露出两个参数以供修改，一个是粒子数目，一个是移动速度。
3、交互的部分：

• 实现canvas画布中多个圆点的平移。
• 画布中圆点平移的同时圆点实现闪烁

---

实现思路

1、创建画布。
2、以单例模式的方式创建一个圆点类_circle()，圆点有位置、透明度，半径大小的属性，有圆点闪烁，圆点平移的方法。
3、创建return出多个圆点的方法_more()、绘画画布的方法_drew()和一个生命周期函数init()。
4、运行生命周期函数。

如何引用

1、下载canvas.js。
https://github.com/hswlian/JavaScript-blog/blob/master/%E7%B2%92%E5%AD%90%E5%8C%96-%E6%A1%88%E4%BE%8B/canvas.js
2、在html中创建一个容器。

<canvas id="myCanvas"></canvas>

3、创建一个move对象，如下所示。其中第一个参数是粒子的数目，第二个参数是移动的速度。

 new move(200,1);

转载于:https://www.cnblogs.com/huasw/articles/8489359.html