<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
class Picture {
constructor() {
this.cvs = document.querySelector("canvas");
this.cvs.width = this.cvs.offsetWidth * window.devicePixelRatio;
this.cvs.height = this.cvs.offsetHeight * window.devicePixelRatio;
this.ctx = this.cvs.getContext("2d");
this.roundNumber = 80; // 圆的个数
this.r = 5; // 圆的半径
this.distance = 200; // 圆之间最大的距离
this.speed = 30; // 移动的速度
this.lastDrawTime = null; // 绘制的时间
this.initData();
this.paintRound();
}
initData() {
this.points = [];
for (var i = 0; i < this.roundNumber; i++) {
this.points.push({
x: this.random(this.r / 2, this.cvs.width - this.r / 2),
y: this.random(this.r / 2, this.cvs.height - this.r / 2),
xSpeed: Math.round(this.random(0, 1)) ? this.speed : -this.speed,
ySpeed: Math.round(this.random(0, 1)) ? this.speed : -this.speed
});
}
}
paintRound() {
window.requestAnimationFrame(this.paintRound.bind(this))
if (!this.lastDrawTime) {
this.lastDrawTime = Date.now();
return
}
this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height);
for (var i = 0; i < this.points.length; i++) {
var x = this.points[i].x + (Date.now() - this.lastDrawTime) / 1000 * this.points[i].xSpeed;
var y = this.points[i].y + (Date.now() - this.lastDrawTime) / 1000 * this.points[i].ySpeed;
if (x > this.cvs.width - this.r / 2) {
x = this.cvs.width - this.r / 2;
this.points[i].xSpeed = -this.points[i].xSpeed;
}
if (x < this.r / 2) {
x = this.r / 2;
this.points[i].xSpeed = -this.points[i].xSpeed;
}
if (y > this.cvs.height - this.r / 2) {
y = this.cvs.height - this.r / 2;
this.points[i].ySpeed = -this.points[i].ySpeed;
}
if (y < this.r / 2) {
y = this.r / 2;
this.points[i].ySpeed = -this.points[i].ySpeed;
}
this.points[i].x = x;
this.points[i].y = y;
this.ctx.beginPath();
this.ctx.arc(this.points[i].x, this.points[i].y, this.r, 0, 2 * Math.PI);
this.ctx.fillStyle = "rgb(200, 200, 200)";
this.ctx.fill();
this.ctx.closePath();
}
this.paintLine();
this.lastDrawTime = Date.now();
}
paintLine() {
for (var i = 0; i < this.points.length; i++) {
for (var j = i + 1; j < this.points.length; j++) {
// 三角函数已知两边长度获取第三边 ：x*x + y*y = z*z
var d = Math.sqrt((this.points[i].x - this.points[j].x) ** 2 + (this.points[i].y - this.points[j].y) ** 2)
if (this.distance < d) {
continue;
}
this.ctx.beginPath();
this.ctx.moveTo(this.points[i].x, this.points[i].y);
this.ctx.lineTo(this.points[j].x, this.points[j].y);
this.ctx.strokeStyle = "rgba(200,200,200, " + (1 - Math.ceil(d) / this.distance) + ")";
this.ctx.stroke();
this.ctx.closePath();
}
}
}
random(n, m) {
return Math.random() * (m - n) + n;
}
}
new Picture();
</script>
</body>
</html>
