博客

系列文章


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



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



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



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



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



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



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

hello，今天赶了一天的路，刚刚闲停下来，本节带着大家梳理一下上一节的实现思路

首先分析博客背景效果，其中无非就是点与线，再加了一些运动效果，所以我们自然要从点入手，无点何以有线。

再分析每次刷新界面时点的位置是随机的，个数也应当是用户所设定的,点的大小应该也由用户设定。所以我们应该随机到一个这样的数据格式

[
	[x1,y1,r1],
	[x2.y2,r2],
	....
	[xn,yn,rn]
]

或者json格式的数据也可以，个人习惯了二维数组。

下面就是根据现有分析编写的代码

<script type="text/javascript">
class FwhfPointLine{
	constructor(pointNum,pointR){
		this.pointNum = pointNum;
		this.pointR = pointR;
		this.width = window.innerWidth;
		this.height = window.innerHeight;
		this.pointArr = [];
		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])];
		}
		for(var i = 0 ; i < this.pointNum ; i++){
			this.context.beginPath();
			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();
		}
	}
	rand(min,max){
		var c = max - min + 1;
		return Math.floor(Math.random() * c + min);
	}
}
/*
*pointeNum 随机的点的个数 number 
*pointR 点的半径 array [minR,maxR] 推荐[0.5,1] 
*/
new FwhfPointLine(50,[0.5,1]); 
</script>

init()中首先创建canvas画布,并配置canvas画布的基本样式(this.canvas.style.pointerEvents = ‘none’;实现点击穿透，防止canvas遮挡其他页面元素造成事件失效)，及获取canvas绘图环境。 最后就是循环遍历生成需要的数据格式并绘制在canvas上。

rand函数是随机数的封装，不做过多解释。

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){
		this.pointNum = pointNum;
		this.pointR = pointR;
		this.pointColor = pointColor;
		this.pointColorLength = pointColor.length;
		this.pointSpeed = pointSpeed;
		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];
			}
		}
	}
	Repaint(){
		this.timer = setInterval(()=>{
			this.context.clearRect(0,0,this.width,this.height);
			this.draw();
		},20)
	}
	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] 
*/
new FwhfPointLine(50,[0.5,1],['rgb(200,0,0)','rgb(0,200,0)','rgb(0,0,200)'],[-3,3]); 
</script>

主要利用定时器定时清空画布并重新绘制来实现远点运动效果

this.context.clearRect(0,0,this.width,this.height);

this.draw();