canvas简单的粒子移动
canvas - 简单的粒子移动
在公司,做了下面一个canvas动画玩儿玩儿。
1、效果示例请戳:https://hswlian.github.io/JavaScript-blog/粒子化-案例/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/粒子化-案例/canvas.js
2、在html中创建一个容器。
<canvas id="myCanvas"></canvas>
3、创建一个move对象,如下所示。其中第一个参数是粒子的数目,第二个参数是移动的速度。
new move(200,1);