话不多说直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原子</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
margin: 0;
height: 100%;
background: #fff;
}
canvas{
display: block;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script>
var All;
var arr = [];
var current = {};
function All() {
this.canvas = document.getElementById('mycanvas');
this.ctx = this.canvas.getContext('2d');//创建上下文
var windowW = document.documentElement.clientWidth;
var windowH = document.documentElement.clientHeight;
if(windowW > 800){//设置数量
this.num = 100;
}else{
this.num = 60;
}
this.canvas.width = windowW;//画布宽
this.canvas.height = windowH;//画布高
this.x = Math.random() * windowW;//设置随机X坐标
this.y = Math.random() * windowH;//设置随机Y坐标
this.mx = Math.random();//
this.my = Math.random();//
this.r = Math.random() * 10;//创建随机半径
// this.current = {'x':null,'y':null};
this.canvas.onmousemove = function(e){//监听鼠标移动
e = e || this.event;
current.y = e.clientY;
current.x = e.clientX;
}
this.canvas.onmouseout = function(){//监听鼠标离开
current.y = null;
current.x = null;
}
this.init = function(){//初始化
for(var i = 0; i < this.num; i++){
arr.push(new All());
}
this.draw();//运行
}
this.drawCircle = function() {//画圆
this.ctx.beginPath();//开始一个路径
this.ctx.arc(this.x,this.y,this.r,0,2*Math.PI);//画圆
this.ctx.fillStyle = '#999';//填充颜色
this.ctx.fill();//填充
this.ctx.closePath();//结束路径
}
this.drawLine = function(loop){//画线
let dx = this.x - loop.x;
let dy = this.y - loop.y;
let d = Math.sqrt(dx * dx + dy * dy);
if(d < 150){
this.ctx.beginPath();//开始路径
this.ctx.moveTo(this.x,this.y);//起始点
this.ctx.lineTo(loop.x,loop.y);//连接
this.ctx.strokeStyle = '#999';//设置线颜色
this.ctx.stroke();//填充
this.ctx.closePath();
}
}
this.move = function(w,h) {//圆圈移动，圆圈移动的距离必须在屏幕范围内
this.mx = (this.x < w && this.x > 0) ? this.mx : (-this.mx);
this.my = (this.y < h && this.y > 0) ? this.my : (-this.my);
this.x += this.mx / 2;//随机圆心X
this.y += this.my / 2;//随机圆心Y
}
this.mouseOn = function(current) {//监听鼠标鼠标
this.ctx.beginPath();//开始路径
this.r = 8;//圆大小
this.ctx.arc(current.x,current.y,this.r,0,2 * Math.PI);//画圆
this.ctx.fillStyle = 'rgba(255,99,71,.8)';//填充颜色
this.ctx.fill();//填充
this.ctx.closePath();//关闭路径
}
var self = this;
this.draw = function() { //画图逻辑
self.ctx.clearRect(0,0,windowW,windowH); //清除画布
for(var i = 0; i < arr.length; i++){ //循环画圆
arr[i].move(windowW,windowH);//移动
arr[i].drawCircle();//画圆
for(var j = i + 1; j < arr.length; j++){ //圆之间连线
arr[i].drawLine(arr[j]);
}
}
//console.log(current.x)
if(current.x){//鼠标跟踪画图
self.mouseOn(current);//跟踪画圆
for(var k = 0; k < arr.length; k++){//连线
self.drawLine(arr[k]);
self.x = current.x;//定义鼠标起始位置
self.y = current.y;
}
}
requestAnimationFrame(self.draw);//帧播放
}
}
window.onload = function() {
All = (new All).init();
};
</script>
</body>
</html>复制可直接运行。