canvas实战之酷炫背景动画（三）

系列文章
canvas实战之酷炫背景动画（一）
canvas实战之酷炫背景动画（二）
canvas实战之酷炫背景动画（三）
canvas实战之酷炫背景动画（四）
canvas实战之酷炫背景动画（五）
canvas实战之酷炫背景动画（六）
canvas实战之酷炫背景动画（七）

接着上一节，实现原点绘制及运动后实现线条的绘制，观察博客背景效果可以很明显的发现当两点距离小于某个定值时才会绘制，而且有透明度变化。
按照正常的思路，应当是在绘制点的循环中顺便判断两点间的距离是否小于某一个值。
ok,下面时代码实现。

ok,接下来就是实现给点添加颜色。并让点动起来。
需求数据格式

[
	[x1,y1,r1,colorIndex1,speedX1,speedY1],
	[x2.y2,r2,colorIndex2,speedX2,speedY2],
	....
	[xn,yn,rn,colorIndexn,speedXn,speedYn]
]

<script type="text/javascript">
class FwhfPointLine{
	constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor){
		this.pointNum = pointNum;
		this.pointR = pointR;
		this.pointColor = pointColor;
		this.pointColorLength = pointColor.length;
		this.pointSpeed = pointSpeed;
		this.lineMaxLength = Math.pow(lineMaxLength,2);
		this.lineColor = lineColor;
		this.width = window.innerWidth;
		this.height = window.innerHeight;
		this.pointArr = [];
		this.timer = null;
		this.canvas = '';
		this.context = '';
		this.init();
	}
	init(){
		document.body.innerHTML += "";
		this.canvas = document.getElementById('fwhfCanvas');
		this.canvas.width = this.width;
		this.canvas.height = this.height;
		this.canvas.style.position = "fixed";
		this.canvas.style.top = 0;
		this.canvas.style.left = 0;
		this.canvas.style.pointerEvents = 'none';
		this.context = this.canvas.getContext('2d');
		for(var i = 0 ; i < this.pointNum ; i++){
			this.pointArr[i] = [this.rand(this.pointR[1],this.width-this.pointR[1]),
								this.rand(this.pointR[1],this.height-this.pointR[1]),
								this.rand(this.pointR[0],this.pointR[1]),
								this.rand(0,this.pointColorLength-1),
								this.rand(this.pointSpeed[0],this.pointSpeed[1]),
								this.rand(this.pointSpeed[0],this.pointSpeed[1])];
		}
		this.Repaint();
	}
	draw(){
		for(var i = 0 ; i < this.pointNum ; i++){
			this.context.beginPath();
			this.context.fillStyle = this.pointColor[this.pointArr[i][3]];
			this.context.arc(this.pointArr[i][0],this.pointArr[i][1],this.pointArr[i][2],0,2*Math.PI);
			this.context.fill();
			this.context.closePath();
			
			if(this.pointArr[i][0] + this.pointArr[i][4] >= this.canvas.width){
				this.pointArr[i][0] = this.canvas.width;
				this.pointArr[i][4] *= -1;
			}else if(this.pointArr[i][0] + this.pointArr[i][4] <= 0){
				this.pointArr[i][0] = 0;
				this.pointArr[i][4] *= -1;
			}else{
				this.pointArr[i][0] += this.pointArr[i][4];
			}

			if(this.pointArr[i][1] + this.pointArr[i][5] >= this.canvas.height){
				this.pointArr[i][1] = this.canvas.height;
				this.pointArr[i][5] *= -1;
			}else if(this.pointArr[i][1] + this.pointArr[i][5] <= 0){
				this.pointArr[i][1] = 0;
				this.pointArr[i][5] *= -1;
			}else{
				this.pointArr[i][1] += this.pointArr[i][5];
			}
			for(var j = 0 ; j < this.pointNum ; j++){
				var showIndex = ((Math.pow(this.pointArr[i][0]-this.pointArr[j][0],2) + Math.pow(this.pointArr[i][1]-this.pointArr[j][1],2))/this.lineMaxLength).toFixed(1);
				if(showIndex < 1){
					this.context.beginPath();
					this.context.strokeStyle = "rgba("+this.lineColor[0]+","+this.lineColor[1]+","+this.lineColor[2]+","+showIndex+")";
					this.context.moveTo(this.pointArr[i][0],this.pointArr[i][1]);
					this.context.lineTo(this.pointArr[j][0],this.pointArr[j][1]);
					this.context.stroke();
					this.context.closePath();
				}
			}
		}
	}
	Repaint(){
		this.timer = setInterval(()=>{
			this.context.clearRect(0,0,this.width,this.height);
			this.draw();
		},50)
	}
	rand(min,max){
		var c = max - min + 1;
		return Math.floor(Math.random() * c + min);
	}
}
/*
*pointeNum 随机的点的个数 number 
*pointR 点的半径 array [minR,maxR] 推荐[0.5,1] 
*pointColor 点的颜色 array [color1,color2,...] 
*pointSpeed 点的速度 array [speedX,speedY] 
*lineMaxLength 线条出现的最大长度 number 
*lineColor 线条的颜色 array [0-255,0-255,0-255] 
*/
new FwhfPointLine(50,[0.5,1],['rgb(200,0,0)','rgb(0,200,0)','rgb(0,0,200)'],[-3,3],100,[222,116,159]); 
</script>

执行上述代码可以发现两点之间会出现两条线段，这是因为在 for循环嵌套中相当于绘制了两次。
而且直线连接处不在原点，这是因为在绘制第一条线段后，绘制第二条线段时后面的点发生了位移。大家思考一下如何解决这样的问题。