HTML5粒子特效教程动画制作进阶指南

<canvas id="particleCanvas" width="800" height="600"></canvas>

#particleCanvas {
  display: block;
  background: #000;
}

const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');

const particleCount = 100;
const particles = [];

function Particle() {
  this.x = Math.random() * canvas.width;
  this.y = Math.random() * canvas.height;
  this.vx = (Math.random() - 0.5) * 2;
  this.vy = (Math.random() - 0.5) * 2;
  this.size = Math.random() * 5 + 1;
  this.color = 'hsl(' + Math.random() * 360 + ', 80%, 60%)';
}
<p>Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
};</p><p>Particle.prototype.update = function() {
if (this.x < 0 || this.x > canvas.width) this.vx <em>= -1;
if (this.y < 0 || this.y > canvas.height) this.vy </em>= -1;
this.x += this.vx;
this.y += this.vy;
};</p>

for (let i = 0; i function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
requestAnimationFrame(animate);
}<p>animate();</p>

let mouse = { x: undefined, y: undefined };
<p>window.addEventListener('mousemove', function(e) {
mouse.x = e.x;
mouse.y = e.y;
});</p><p>// 在update中加入距离判断
Particle.prototype.update = function() {
let dx = mouse.x - this.x;
let dy = mouse.y - this.y;
let distance = Math.sqrt(dx<em>dx + dy</em>dy);</p><p>if (distance < 100) {
this.vx -= dx / 5000;
this.vy -= dy / 5000;
}
// ...其他逻辑
};</p>

function connectParticles() {
  for (let a = 0; a   if (distance < 80) {
    ctx.beginPath();
    ctx.strokeStyle = particles[a].color;
    ctx.lineWidth = 0.5;
    ctx.moveTo(particles[a].x, particles[a].y);
    ctx.lineTo(particles[b].x, particles[b].y);
    ctx.stroke();
  }
}

} }