前几天无聊，在git上看到一个表白页，顿时觉得原来还可以这样的。于是自己也撸了一个，git真是一个好地方，这里的猿们说话一个比一个好听，我超喜欢这里。。。
git地址（star交出来！
直接把别人的项目底子拿过来改了一下233333，不过核心代码是完全不一样的，因为人家的代码我懒得看（叉腰），好吧其实是看不懂
这个页面一共花了大概有10h，绝大多数时间都在理逻辑（粒子的动画），毕竟其他的部分都是现成的。。
现在，先来理一遍逻辑把（主要逻辑，监听页面resize和兼容之类的就跳过了
1. 创建画布
这一步有两个行为，1是在画布填入text内容（font.write())，2是开始使用window.requestAnimationFrame不停的渲染粒子状态（后面会说到
2. 按照一定的时间间隔，在画布上填入text内容
第一步调用font.write()之后，会按照一定的时间间隔，把设定好的words逐步展示
3. 把画布转成imgData，填充粒子
第二步每次展示不同的text时,都会调用subtitles.particle.init(text)，它的作用是将的canvas直接转成imageData，然后咱遍历整个imageData，找到需要填充粒子的位置，用粒子替换原来的图像。
4.让粒子动起来
在第一步中，每帧都会调用一个animationV方法：
它的作用是，实时的更新粒子的状态然后更新视图，让人看起来好像是粒子动起来了，这时候最麻烦的就来了，怎么维护粒子的状态呢，在第三步中每一次更新展示文本都会调用的subtitles.particle.init方法，其中有Point.move和Point.clone方法, 他们的作用分别是
Point.move：记录这颗粒子运动的终点，计算每帧的运动距离。
Point.clone：当粒子数量不够的时候，直接new一个会突兀的出现，所以为了美观，直接随机从现有的粒子复制一个，继承原来粒子的状态，就会有更新的动画了。
其实每个粒子有不少的属性
有很多属性都是在后面不停的完善加上去的,其中比较重要的是moveNumC和moveNum，moveNumC是一个随机数值，每一次文本更新，粒子移动的时候，moveNumC就是它移动到目标位置需要多少帧，所以这样每个粒子运动速度就不同了，会显得好看一下。
