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

风舞红枫

已于 2022-03-19 14:03:46 修改

阅读量1.9k

点赞数 2

分类专栏： canvas 文章标签： canvas

于 2021-03-04 14:57:05 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/114368545

版权

canvas 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

相信大家都看到了博客中的背景动画,推荐你们一款插件canvas-nest.js
npm install canvas-nest.js下载后将文件夹中的node_modules\canvas-nest.js\dist中的canvas-nest.js取出引入到html页面中,切记建议放在body标签中的最下方

示例

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="2" count="99" src="canvas-nest.js"></script>

color: 线条颜色, 默认: ‘0,0,0’ ；三个数字分别为(R,G,B)，注意用,分割
pointColor: 交点颜色, 默认: ‘0,0,0’ ；三个数字分别为(R,G,B)，注意用,分割
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

既然学习了canvas自然要尝试自行封装，下方是我的初步封装，后期再进行优化添加功能等，下节先进行代码解读
效果图如下：
请添加图片描述
源代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
<script type="text/javascript">
class fwhfPointLine{
	constructor(pointNum,minR,maxR,pointColor,pointSpeed,lineColor,lineShowWidth){
		this.pointNum = pointNum;
		this.fwhfPointArr = [];
		this.minR = minR;
		this.maxR = maxR;
		this.pointColor = pointColor;
		this.pointSpeed = pointSpeed;
		this.lineColor = lineColor;
		this.lineShowWidth = lineShowWidth;
		this.x = 0;
		this.y = 0;
		this.canvas = '';
		this.context = '';
		this.timer = '';
		this.init();
	}
	init(){
		document.body.innerHTML += '<canvas id="fwhfCanvas"></canvas>';
		this.canvas = document.getElementById('fwhfCanvas');
		this.canvas.width = window.innerWidth;
		this.canvas.height = window.innerHeight;
		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.fwhfPointArr.push([this.rand(1,this.canvas.width-1),this.rand(1,this.canvas.height-1),this.rand(this.minR,this.maxR),this.pointColor[this.rand(0,this.pointColor.length-1)],this.rand(this.pointSpeed[0],this.pointSpeed[1]),this.rand(this.pointSpeed[0],this.pointSpeed[1])])
		}
		window.onmousemove = (e)=>{
			this.x = e.clientX;
			this.y = e.clientY;
		}
		this.fwhfPointTimer();
	}
	fwhfPoint(){
		for(var i = 0 ; i < this.fwhfPointArr.length ; i++){
			this.context.beginPath();
			this.context.fillStyle = this.fwhfPointArr[i][3];
			this.context.arc(this.fwhfPointArr[i][0],this.fwhfPointArr[i][1],this.fwhfPointArr[i][2],0,2*Math.PI);
			this.context.fill();
			this.context.closePath();

			if(this.fwhfPointArr[i][0] + this.fwhfPointArr[i][4] >= this.canvas.width){
				this.fwhfPointArr[i][0] = this.canvas.width;
				this.fwhfPointArr[i][4] *= -1;
			}else if(this.fwhfPointArr[i][0] + this.fwhfPointArr[i][4] <= 0){
				this.fwhfPointArr[i][0] = 0;
				this.fwhfPointArr[i][4] *= -1;
			}else{
				this.fwhfPointArr[i][0] += this.fwhfPointArr[i][4];
			}

			if(this.fwhfPointArr[i][1] + this.fwhfPointArr[i][5] >= this.canvas.height){
				this.fwhfPointArr[i][1] = this.canvas.height;
				this.fwhfPointArr[i][5] *= -1;
			}else if(this.fwhfPointArr[i][1] + this.fwhfPointArr[i][5] <= 0){
				this.fwhfPointArr[i][1] = 0;
				this.fwhfPointArr[i][5] *= -1;
			}else{
				this.fwhfPointArr[i][1] += this.fwhfPointArr[i][5];
			}
		}
		for(var i = 0 ; i < this.fwhfPointArr.length ; i++){
			for(var j = 0 ; j < this.fwhfPointArr.length ; j++){
				if(Math.abs(this.fwhfPointArr[j][0]-this.fwhfPointArr[i][0])<this.lineShowWidth && Math.abs(this.fwhfPointArr[j][1]-this.fwhfPointArr[i][1])<this.lineShowWidth){
					this.context.beginPath();
					this.context.strokeStyle = this.lineColor;
					this.context.moveTo(this.fwhfPointArr[j][0]-this.fwhfPointArr[j][2]/2,this.fwhfPointArr[j][1]-this.fwhfPointArr[j][2]/2);
					this.context.lineTo(this.fwhfPointArr[i][0]-this.fwhfPointArr[i][2]/2,this.fwhfPointArr[i][1]-this.fwhfPointArr[i][2]/2);
					this.context.stroke();
					this.context.closePath();
				}
			}
			if(Math.abs(this.fwhfPointArr[i][0]-this.x)<this.lineShowWidth && Math.abs(this.fwhfPointArr[i][1]-this.y)<this.lineShowWidth){
				this.context.beginPath();
				this.context.strokeStyle = this.lineColor;
				this.context.moveTo(this.fwhfPointArr[i][0]-this.fwhfPointArr[i][2]/2,this.fwhfPointArr[i][1]-this.fwhfPointArr[i][2]/2);
				this.context.lineTo(this.x,this.y);
				this.context.stroke();
				this.context.closePath();
			}
		}
	}
	fwhfPointTimer(){
		this.fwhfPoint();
		this.timer = setInterval(()=>{
			this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
			this.fwhfPoint();
		},20);
	}
	rand(min,max){
		var c = max - min + 1;
		return Math.floor(Math.random() * c + min) == 0 ? 1 :  Math.floor(Math.random() * c + min);
	}
}
/*
*new fwhfPointLine(pointNum,minR,maxR,pointColor,pointSpeed);
*pointNum 参数一 原点个数
*minR	原点最小半径	推荐0.5
*maxR 	原点最大半径	推荐1
*pointColor 原点颜色
*pointSpeed 运动速度
*lineColor 线条颜色
*lineShowWidth 出现线条距离
*/
new fwhfPointLine(100,0.5,1,['red','green','blue'],[-2,2],'pink',100);		

</script>
</html>