1、每个粒子的初始速度和角度是随机生成的，粒子的颜色通过相关的设置选项来确定。
2、this.vector用来存储粒子的移动方向：如果this.vector.x为1，则粒子向右运动；如果是-1，则粒子向左移动。同样，如果this.vector.y为负，则粒子向上移动，如果为正，则粒子向下移动。
this.update用来更新每个粒子下一个位置的坐标。首先，进行边缘检测；如果粒子的移动超出了canvas的尺寸，则将方向向量乘以-1产生反向的运动方向。
3、窗口缩放可能会引起粒子超出边界，如此一来边缘检测函数就捕捉不到了，所以就需要一系列的if语句来检测这种情况，将粒子的位置重置为当前canvas的边界。
4、最后一步，将这些点绘制到画布上。
粒子的类已经写好了，下面就把他绘制出来：
| function init(){ getSize(); for(let i = 0;i<opt.particleAmount; i++){ particle.push(new Partical()); } loop(); } |
上面初始化了opt.particleAmount个粒子对象，初始化了对象但是并没有绘制出来，下面是loop函数：
| function loop(){ ctx.clearRect(0,0,w,h); for(let i = 0;i<particle.length; i++){ particle[i].update(); particle[i].draw(); } window.requestAnimationFrame(loop); } |
loop()函数每执行一次，都会清除canvas上的内容，然后通过粒子对象的update()函数重新计算粒子的坐标，最后通过粒子对象的draw()函数来绘制粒子。下面是这个时候的效果：
但是在浏览器窗口大小改变以后有些粒子就会消失不见，这个时候需要添加一个事件来监听浏览器大小是否改变：
| window.addEventListener("resize",function(){ winResize() },false); |
然后需要来写winResize()函数，这里需要注意一下，浏览器改变的时候触发resize事件的次数会特别频繁，稍微移动一下浏览器的边缘就是触发几十次resize事件，那么也就会重新计算几十次浏览器大小，比较消耗性能，这个大家可以测试一下，这里就直接说解决方法吧，其实我们要的只是浏览器改变后的最后的大小，至于中间到底改变了多少次和我们没有关系，所以我们可以在浏览器窗口改变的时候延缓200毫秒后执行计算浏览器大小的事件，如果在这期间一直触发resize事件，那就一直往后延缓200毫秒，听起来挺复杂，其实代码很简单：
| var particle = [], w,h; //粒子数组，浏览器宽高 var delay = 200,tid; //延缓执行事件和setTimeout事件引用 function winResize(){ clearTimeout(tid); tid = setTimeout(function(){ getSize(); //获取浏览器宽高，在文章最上面有介绍 },delay) } |
