js烟雾特效教程

<canvas id="smokeCanvas"></canvas>

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

class SmokeParticle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 2 - 1; // 水平速度
    this.vy = Math.random() * -5 - 2; // 垂直速度
    this.size = Math.random() * 3 + 1;
    this.opacity = Math.random();
  }

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

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

const particles = [];
function createParticle() {
  const x = canvas.width / 2;
  const y = canvas.height;
  particles.push(new SmokeParticle(x, y));
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, index) => {
    particle.update();
    if (particle.opacity <= 0) {
      particles.splice(index, 1);
    } else {
      particle.draw(ctx);
    }
  });
  requestAnimationFrame(animate);
}

setInterval(createParticle, 100);
animate();

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});