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 += "<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();
	}
	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回圈嵌套中相當于繪制了兩次，
而且直線連接處不在原點，這是因為在繪制第一條線段后，繪制第二條線段時后面的點發生了位移，大家思考一下如何解決這樣的問題，