canvas 粒子

在网页开发中，使用Canvas创建粒子效果是一种常见的需求。解决这个问题的方案是利用HTML5的Canvas API绘制粒子，并通过JavaScript控制其运动、颜色和交互等特性。下面将几种实现思路及代码示例。

基本粒子动画

我们可以创建一个简单的粒子动画。这个动画中的粒子会随机生成并从屏幕顶部向下移动。

html
</p>




<title>Canvas 粒子</title>

  body { margin: 0; overflow: hidden; }
  canvas { display: block; }





  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  class Particle {
    constructor() {
      this.x = Math.random() * canvas.width;
      this.y = -Math.random() * canvas.height;
      this.speedY = Math.random() * 5 + 1;
      this.size = Math.random() * 3 + 1;
      this.opacity = Math.random() * 0.5 + 0.1;
    }

    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255,255,255,${this.opacity})`;
      ctx.fill();
    }

    update() {
      this.y += this.speedY;
      if (this.y > canvas.height) this.y = -Math.random() * canvas.height;
      this.draw();
    }
  }

  let particles = [];
  for (let i = 0; i  particle.update());
    requestAnimationFrame(animate);
  }

  animate();




<p>

带交互的粒子效果

接下来，我们可以在粒子效果中加入鼠标交互，使得当鼠标移动时，粒子会朝向鼠标位置移动。

javascript
// 在原有代码基础上添加以下内容</p>

<p>let mouse = { x: undefined, y: undefined };
canvas.addEventListener('mousemove', event => {
  mouse.x = event.x;
  mouse.y = event.y;
});</p>

<p>class InteractiveParticle extends Particle {
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = <code>rgba(255,255,255,${this.opacity});
    ctx.fill();
  }


update() {
    if (mouse.x && mouse.y) {
      const dx = mouse.x - this.x;
      const dy = mouse.y - this.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      const force = -0.1 / distance;
      this.speedX += (dx * force);
      this.speedY += (dy * force);
    }
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
    if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
    this.draw();
  }
}

particles = [];
for (let i = 0; i < 100; i++) particles.push(new InteractiveParticle());

粒子连线效果

我们还可以让粒子之间根据距离进行连线，形成一种星云般的视觉效果。

javascript
// 在原有的InteractiveParticle类中添加连线逻辑</p>

<p>update() {
  // ... 原有的更新逻辑 ...
  if (mouse.x && mouse.y) {
    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
  }
}

通过上述三种不同的思路，你可以根据实际需求选择合适的粒子效果实现方式。