canvas背景效果
canvas背景效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width = canvas.offsetWidth;
let h = canvas.height = canvas.offsetHeight;
let circles = [];
function rand(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
class Circle {
constructor() {
this.r = rand(5, 15);
let x = rand(0, canvas.width - this.r);
let y = rand(0, canvas.height - this.r);
this.x = x < this.r ? this.r : x;
this.y = y < this.r ? this.r : y;
let speed = rand(1, 3);
this.speedX = rand(0, 4) > 2 ? speed : -speed;
this.speedY = rand(0, 4) > 2 ? speed : -speed;
}
drawCircle(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 360);
ctx.closePath();
ctx.fillStyle = 'rgba(204,204,204,0.3)';
ctx.fill();
}
drawLine(ctx, _circle) {
let dx = this.x - _circle.x;
let dy = this.y - _circle.y;
let d = Math.sqrt(dx * dx + dy * dy);
if (d < 150) {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(_circle.x, _circle.y);
ctx.closePath();
ctx.strokeStyle = 'rgba(204,204,204,0.3)';
ctx.stroke();
}
}
move(w, h) {
this.x += this.speedX / 10;
if (this.x > w || this.x < 0) {
this.speedX *= -1;
}
this.y += this.speedY / 10;
if (this.y > h || this.y < 0) {
this.speedY *= -1;
}
}
}
class curCircle extends Circle {
constructor() {
super();
}
drawCircle(ctx) {
ctx.beginPath();
this.r = 5;
ctx.arc(this.x, this.y, this.r, 0, 360);
ctx.closePath();
ctx.fillStyle = 'rgba(255,77,54,0.6)';
ctx.fill();
}
}
let circle = new curCircle();
let draw = function () {
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < circles.length; i++) {
circles[i].drawCircle(ctx);
for (j = i + 1; j < circles.length; j++) {
circles[i].drawLine(ctx, circles[j]);
}
circles[i].move(w, h);
}
if (circle.x) {
circle.drawCircle(ctx);
for (let k = 1; k < circles.length; k++) {
circle.drawLine(ctx, circles[k])
}
}
requestAnimationFrame(draw);
};
let init = function (num) {
for (let i = 0; i < num; i++) {
circles.push(new Circle());
}
draw();
};
window.addEventListener('load', init(20));
canvas.addEventListener('mousemove', function (e) {
e = e || window.event;
circle.x = e.offsetX;
circle.y = e.offsetY;
});
canvas.addEventListener('mouseout', function (e) {
circle.x = null;
circle.y = null;
});
</script>
</html>
