这样所有的粒子动画都完成了，接下来就可以在粒子之间画线了，我们上面定义的opt对象里面有一个minDistance变量，当两个粒子之间的连线小于这个值的时候，我们就给他们之间画上线。
那么如何计算两个粒子之间的距离呢，大家可以回想一下初中数学第一课，勾股定理，直角三角形两个直角边的平方和等于第三条变的平方，看下面：
我们现在知道每个粒子的x轴和y轴的坐标，那么我们就可以计算出两个点之间的距离了，写一个函数，传入两个点，如下：
| function getDistance(point1,point2){ return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2)); } |
现在我们可以计算出两个点的距离，那么我们就计算出所有每个粒子同其他所有粒子的距离，来确定它们之间是否需要连线，当然如果所有粒子的颜色深度都一模一样，那就有点丑了，所以我们这里可以根据两个粒子之间的距离来决定连线的透明度，两个粒子距离越近，越不透明，距离越远，越透明，超过一定距离就不显示了。
| function linePoint(point,hub){ for(let i = 0;i<hub.length;i++){ let distance = getDistance(point,hub[i]); let opacity = 1 -distance/opt.minDistance; if(opacity > 0){ ctx.lineWidth = 0.5; ctx.strokeStyle = "rgba("+line[0]+","+line[1]+","+line[2]+","+opacity+")"; ctx.beginPath(); ctx.moveTo(point.x,point.y); ctx.lineTo(hub[i].x,hub[i].y); ctx.closePath(); ctx.stroke(); } } } |
上面传入的两个参数分别是一个点和整个点的数组，let opacity = 1 -distance/opt.minDistance;用于判断连线之间的透明度同时也判断了距离，距离大于opt.minDistance时，opacity为负，下面判断时就过滤掉了，上面的颜色用到了正则表达式，需要先解析最上面opt对象里给出的颜色，然后再加上透明度，这段代码如下：
| var line = opt.lineColor.match(/d+/g); |
最后在loop()函数里面不断循环计算距离就可以了，在loop()中加入代码后如下：
| function loop(){ ctx.clearRect(0,0,w,h); for(let i = 0;i<particle.length; i++){ particle[i].update(); particle[i].draw(); } for(let i = 0;i<particle.length; i++){ //添加的是这个循环 linePoint(particle[i],particle) } window.requestAnimationFrame(loop); } |
需要指出的是：如果添加过多的点和/或过多的连接距离（连接距离会创建过多的线条），动画也会扛不住。当视口变窄时最好降低粒子的运动速度：粒子的尺寸越小，在愈加狭窄空间内的移动速度貌似会越快。
