canvas简单实现炫酷粒子运动，连线
具体效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{height: 100%;width:100%;}
</style>
</html>
<script type="text/javascript">
let canvas = document.getElementById('canvas');
canvas.width = document.documentElement.clientWidth-10; //设置canvas宽高
canvas.height = document.documentElement.clientHeight-10; //设置canvas宽高
let ctx = canvas.getContext('2d');
class Draw{
constructor(arg) {
this.globalWidth = document.documentElement.clientWidth; //全局获取canva宽高，后期好判断节点超出删除
this.globalHeight = document.documentElement.clientHeight;
this.globalArr = []; //定义一个装小球运动的坐标以及运动方向速度；
}
createBoll(){ //创建小球
ctx.beginPath();
let x = this.randNum(0,this.globalWidth);
let y = this.randNum(0,this.globalHeight);
let FX = x % 2 == 0 ? '+' : '-';
let FY = y % 2 == 0 ? '+' : '-';
let randSX = this.randNum(1,2);
let randSY = this.randNum(1,2);
this.globalArr.push({x:x,y:y,randSX:(FX+randSX),randSY:(FY+randSY)});
ctx.fillStyle = this.randColor();
ctx.fillRect(x,y,2,2);
ctx.stroke();
ctx.closePath();
}
init(num){ //初始化创建多少个小球
for(let i = 0 ;i < num; i++){
this.createBoll();
};
}
randColor(){ //产生随机数颜色
return `rgb(${this.randNum(0,255)},${this.randNum(0,255)},${this.randNum(0,255)})`;
}
randNum(min,max){ //随机数
return Math.floor( Math.random()*(max- min) + min );
}
autoMove(r,len){ //运动函数,传入小球半径；距离多远连接线条；
ctx.clearRect(0,0,this.globalWidth,this.globalHeight);
this.globalArr.forEach((item,i) => { //遍历当前小球数组 生成小球
item.x += Number(item.randSX);
item.y += Number(item.randSY);
ctx.beginPath();
ctx.fillStyle = this.randColor();
ctx.arc(item.x,item.y,r,0,360,false);
ctx.fill();
ctx.closePath();
});
this.globalArr = this.globalArr.filter(item => { //过滤掉超出范围的小球，大于 小于屏幕宽高的范围；
return ( item.x > 0 && item.y>0 && item.x < this.globalWidth && item.y < this.globalHeight );
});
if(this.globalArr.length < 100){ //当小球数量小于100个 自动补全
this.createBoll();
};
for (var i = 0; i < this.globalArr.length; i++) { //判断当前的坐标，两点距离小于100则自动连线；
for (var j = 0; j < this.globalArr.length; j++) {
if (i != j) {
var one_x = this.globalArr[i].x;
var one_y = this.globalArr[i].y;
var two_x = this.globalArr[j].x;
var two_y = this.globalArr[j].y;
var jl = Math.sqrt(Math.pow(one_x - two_x, 2) + Math.pow(one_y - two_y, 2)); //两点之间最短距离
if (jl < len) {
ctx.strokeStyle = "#ddd";
ctx.moveTo(one_x, one_y);
ctx.lineTo(two_x, two_y);
ctx.stroke();
}
}
}
};
}
}
let draw = new Draw();
draw.init(100);
setInterval( ()=>{
draw.autoMove(14,400);
},16)
</script>
浙公网安备 33010602011771号