js粒子散开效果

// 获取Canvas元素和绘图上下文
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');

// 粒子类
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 2 - 1; // 水平速度
    this.vy = Math.random() * 2 - 1; // 垂直速度
    this.size = Math.random() * 3 + 1; // 粒子大小
    this.color = `rgba(255, 255, 255, ${Math.random()})`; // 粒子颜色
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}

// 创建粒子数组
const particles = [];
for (let i = 0; i < 100; i++) {
  particles.push(new Particle(canvas.width / 2, canvas.height / 2));
}

// 动画循环
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(particle => {
    particle.update();
    particle.draw(ctx);
  });
  requestAnimationFrame(animate);
}

// 开始动画
animate();