canvas实战之酷炫背景动画（一）
系列文章
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 += '';
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>