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

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

既然上一节出现了绘制两次直线以及连接处不在圆点处的bug是由于两次for嵌套后造成二次直线绘制时坐标发生了变化所产生的结果。
那我们就将绘制直线提出来，等待圆点绘制完成后再去实现直线的绘制来解决圆点与直线错位问题。
而二次绘制的情况是由于for嵌套后点1到点2,点2到点1绘制了两次，所以我们可以选择只绘制第一次或则第二次
实现原理

for(var i = 0 ; i < x ; i++){
	for(var j = 0 ; j < i-1 ; j++){
		在这里进行绘制即可实现只有一次绘制 ，既由数组后面的点向前面的点绘线
	}
}

下面时具体代码实现

<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 += "<canvas id='fwhfCanvas'></canvas>";
		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();
	}
	drawPoint(){
		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];
			}
		}
	}
	drawLine(){
		for(var i = 0 ; i < this.pointNum ; i++){
			for(var j = 0 ; j < i-1 ; 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]+","+(1-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.drawPoint();
			this.drawLine();
			
		},30)
	}
	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>