前言
前两天在写了Canvas实现数字雨和放大镜效果和Canvas实现苹果充电盒动效后，还想试一下更炫酷的效果，经过挑选感觉动态粒子文字效果不错，马上开始研究。
正文
还是先看看效果，其中有几个要解决的难点，后面有完整代码。
怎么确定文字位置的粒子坐标怎么让粒子的位置和文字位置的粒子坐标对应怎么让粒子动起来
事先准备
我们要准备几个方便自己写代码的函数，随机数、随机颜色、和绘制粒子
初始化粒子
首先得有粒子，我们使用随机数和随机颜色生成粒子，并且记录坐标信息。
怎么确定文字位置的粒子坐标
原理：用一种特殊颜色（如红色）在画布的一块区域填充文字，然后使用getImageData方法获取这一块区域每一个单位像素颜色，如果这个单位像素是标记的特殊颜色就记录其坐标。
这里是取5个像素为一个单位，是为了有颗粒感。
怎么让粒子的位置和文字位置的粒子坐标对应
我们现在有所有粒子的位置信息也有文字位置的粒子坐标，那我们怎么对应起来呢。我们可以使用随机数加上map使二者对应。
有了生成的map映射关系，我们就可以确定每一个粒子要到达的位置。遍历所有粒子，存在map映射关系的话我们就使用映射到的坐标，不存在映射关系我们使用随机数生成。同时，确定水平和竖直方向速度。
让粒子动起来
起始坐标和目标坐标有了，速度也有了，那不就剩下使用requestAnimationFrame绘制了吗，再加上边界的判断，最后在所有粒子都到达指定坐标停止动画就行了。
完整代码
结语
感兴趣的可以去试试
