点亮夜空，迎新春

2023-11-03 08:59:07

简介

在新年的第一天，烟花照亮夜空，寓意着新一年的希望和喜悦。对于技术爱好者来说，代码中的烟花同样能够传递节日的祝福，点燃新一年的热情。

代码实现

使用 HTML5 多媒体、CSS 定位、动画等技术，可以创作出动态的烟花效果。下面是部分代码示例：

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas"></canvas>

  <script>
    // 初始化画布
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    // 烟花参数
    var numParticles = 100;
    var gravity = 0.05;

    // 创建粒子数组
    var particles = [];
    for (var i = 0; i < numParticles; i++) {
      particles.push({
        x: canvas.width / 2,
        y: canvas.height / 2,
        vx: Math.random() * 2 - 1,
        vy: Math.random() * 2 - 1,
        radius: Math.random() * 5,
        color: "rgb(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ")"
      });
    }

    // 绘制函数
    function draw() {
      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 更新粒子位置和速度
      for (var i = 0; i < numParticles; i++) {
        var particle = particles[i];
        particle.x += particle.vx;
        particle.y += particle.vy + gravity;
        particle.vy += gravity;

        // 检测边界
        if (particle.x < 0 || particle.x > canvas.width) {
          particle.vx *= -1;
        }
        if (particle.y < 0 || particle.y > canvas.height) {
          particle.vy *= -1;
        }

        // 绘制粒子
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
        ctx.fillStyle = particle.color;
        ctx.fill();
      }

      // 下一帧
      requestAnimationFrame(draw);
    }

    // 启动绘制
    draw();
  </script>
</body>
</html>