打造高大上的Canvas粒子动画

首先来看下我们准备要做的粒子动画效果是怎么样的~

是这样：

或者是这样：

甚至是这样：

很酷炫！

那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。

技术选择

因为粒子数量很多，而且涉及到图像像素处理，所以这里使用Canvas是不二选择。

（注意，以下演示的代码只是关键代码，重点在于解决思路。）

 1   绘制粒子轮廓图

首先要在canvas画布上绘制一个由粒子组成的轮廓图，记录下每一个粒子的坐标，这样才能有后续的动画。

1. 创建一个<canvas>元素，并获取Canvas画布渲染上下文