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

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

canvas炫酷背景动画之最终版

<script type="text/javascript">
class FwhfPointLine{
	constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor,eMaxLength,eSpeed){
		this.pointNum = pointNum || 66;
		this.pointR = pointR || [0.5,0.7];
		this.pointColor = pointColor || ['rgb(200,0,0)','rgb(0,200,0)','rgb(0,0,200)'];
		this.pointColorLength = this.pointColor.length;
		this.pointSpeed = pointSpeed || [-3,3];
		this.lineMaxLength = lineMaxLength || 100;
		this.lineMaxLengthPow = Math.pow(this.lineMaxLength,2);
		this.lineColor = lineColor || [222,116,159];
		this.eMaxLength = eMaxLength || 150;
		this.eCoefficient = this.lineMaxLength/eMaxLength;
		this.eSpeed = eSpeed || 3;
		this.width = window.innerWidth;
		this.height = window.innerHeight;
		this.pointArr = [];
		this.timer = null;
		this.canvas = '';
		this.context = '';
		this.x = '';
		this.y = ''; 
		this.flag = false;
		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]),
								false,null,null,0];
		}
		window.onmousemove = (e)=>{
			var e = e || event;
			this.x = e.clientX;
			this.y = e.clientY;
			if(!this.flag && this.x > 3 && this.x < this.width-3 && this.y > 3 && this.y < this.height-3){
				this.flag = !this.flag;
			}
			if(this.flag && (this.x <= 3 || this.x >= this.width-3 || this.y <= 3 || this.y >= this.height-3)){
				this.flag = !this.flag;
				for(var i = 0 ; i < this.pointNum ; i++){
					this.pointArr[i][6] = false;
					this.pointArr[i][7] = null;
					this.pointArr[i][8] = null;
					this.pointArr[i][9] = 0;
				}
			}
		}
		this.Repaint();
	}
	drawPoint(){
		for(var i = 0 ; i < this.pointNum ; i++){
			if(this.flag){
				var showELineeCoefficient = Math.pow(this.x-this.pointArr[i][0],2)+Math.pow(this.y-this.pointArr[i][1],2);
				var showELine = showELineeCoefficient/Math.pow(this.eMaxLength,2);
				if(showELine <= 1 && (this.pointArr[i][9] === true || this.pointArr[i][9] === 0)){
					this.pointArr[i][6] = true;
					this.pointArr[i][0] = this.x-Math.sqrt(this.lineMaxLengthPow)*(this.x-this.pointArr[i][0])/Math.sqrt(showELineeCoefficient);
					this.pointArr[i][1] = this.y-Math.sqrt(this.lineMaxLengthPow)*(this.y-this.pointArr[i][1])/Math.sqrt(showELineeCoefficient);
				}else if(showELine > 1){
					this.pointArr[i][6] = false;
				}
			}
			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][6]){
				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];
				}
			}else{
				if(this.pointArr[i][7] !== null && this.pointArr[i][9] === true){
					var denseIndex = 0;
					for(var j = 0 ; j < this.pointNum ; j++){
						if(Math.abs(this.pointArr[i][0] - this.pointArr[j][0])<this.lineMaxLength/5 
							&& Math.abs(this.pointArr[i][1] - this.pointArr[j][1])<this.lineMaxLength/5){
							denseIndex++;
							if(denseIndex > 3){
								this.pointArr[i][0] += this.rand(-1,1);
								this.pointArr[i][1] += this.rand(-1,1);
							}
						}
					}
				}else{
					if(this.pointArr[i][7] === null){
						var eSpeedCoefficient = Math.sqrt(Math.pow(this.x-this.pointArr[i][0],2)+Math.pow(this.y-this.pointArr[i][1],2));
						this.pointArr[i][7] = this.eSpeed*(this.x-this.pointArr[i][0])/eSpeedCoefficient;
						this.pointArr[i][8] = this.eSpeed*(this.y-this.pointArr[i][1])/eSpeedCoefficient;
						this.pointArr[i][9] = [this.pointArr[i][0]+2*(this.x-this.pointArr[i][0]),this.pointArr[i][1]+2*(this.y-this.pointArr[i][1])]; 
					}
					if(Math.abs(this.pointArr[i][0]-this.pointArr[i][9][0]) < 10 && Math.abs(this.pointArr[i][1]-this.pointArr[i][9][1]) < 10){
						 this.pointArr[i][0] = this.pointArr[i][9][0];
						 this.pointArr[i][1] = this.pointArr[i][9][1];
						 this.pointArr[i][9] = true;
					}else{
						this.pointArr[i][0] += this.pointArr[i][7];
						this.pointArr[i][1] += this.pointArr[i][8];
					}
				}
			}
		}
	}
	drawLine(){
		var drawLineNum = 0;
		for(var i = 0 ; i < this.pointNum ; i++){
			if(!this.pointArr[i][6]){
				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.lineMaxLengthPow).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();
					}
				}
			}else{
				drawLineNum++;
				this.context.beginPath();
				this.context.strokeStyle = "rgba("+this.lineColor[0]+","+this.lineColor[1]+","+this.lineColor[2]+",0.2)";
				this.context.moveTo(this.x,this.y);
				this.context.lineTo(this.pointArr[i][0],this.pointArr[i][1]);
				this.context.stroke();
				if(drawLineNum >= 2){
					for(var k = 0 ; k < this.pointNum ; k++){
						if(this.pointArr[k][6] && Math.pow((this.pointArr[i][0]-this.pointArr[k][0]),2)
							+Math.pow((this.pointArr[i][1]-this.pointArr[k][1]),2)<Math.pow(this.lineMaxLength/3,2)){
							this.context.moveTo(this.pointArr[i][0],this.pointArr[i][1]);
							this.context.lineTo(this.pointArr[k][0],this.pointArr[k][1]);
							this.context.stroke();
						}
					}
				}
				this.context.closePath();
			}
		}
	}
	Repaint(){
		this.timer = setInterval(()=>{
			this.context.clearRect(0,0,this.width,this.height);
			this.drawPoint();
			this.drawLine();
		},40)
	}
	rand(min,max){
		var c = max - min + 1;
		return Math.floor(Math.random() * c + min);
	}
} 
new FwhfPointLine(); 
</script>