烟花js代码

烟花效果的JavaScript代码通常涉及到HTML5的Canvas API来绘制图形，并结合一些动画效果来模拟烟花的绽放。以下是一个简单的烟花效果的示例代码：

基础概念

烟花效果是一种视觉动画，它模拟了真实世界中烟花爆炸后粒子向四周散开的现象。在编程中，这通常通过创建多个粒子对象，每个对象都有自己的位置、速度和加速度，并且随着时间的推移更新它们的状态来实现。

优势

视觉吸引力：烟花效果能够吸引用户的注意力，增加用户界面的趣味性。
庆祝氛围：适合用于庆祝活动的页面，如节日或特殊事件的网站。
技术展示：可以作为展示JavaScript和Canvas API能力的实例。

类型

2D烟花：在二维平面上模拟烟花效果。
3D烟花：使用WebGL等技术在三维空间中创建更为复杂的烟花效果。

应用场景

节日网站：如新年、国庆等节日的专题页面。
游戏界面：作为游戏中的特效元素。
活动宣传页面：用于吸引用户关注特定活动。

示例代码

以下是一个简单的2D烟花效果的JavaScript代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fireworks</title>
<style>
  canvas {
    display: block;
    background: #000;
  }
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
  const canvas = document.getElementById('fireworksCanvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.radius = Math.random() * 2 + 1;
      this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;
      this.velocity = {
        x: (Math.random() - 0.5) * 10,
        y: (Math.random() - 0.5) * 10
      };
    }

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

    update() {
      this.x += this.velocity.x;
      this.y += this.velocity.y;
      this.draw();
    }
  }

  function createFirework() {
    const x = Math.random() * canvas.width;
    const y = canvas.height;
    for (let i = 0; i < 100; i++) {
      particles.push(new Particle(x, y));
    }
  }

  let particles = [];
  setInterval(createFirework, 1000);

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

  animate();
</script>
</body>
</html>