本文转载于:猿2048网站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>