兔年将至，电子烟花绽放指尖，点亮新年欢乐夜！

2024-02-01 15:48:04

电子烟花点亮新年夜

兔年春节将至，家家户户都在为辞旧迎新做准备。然而，根据国家相关法律法规，在市区燃放鞭炮已被禁止。这不禁让人有些失落，毕竟鞭炮的噼啪声和漫天烟火是春节不可或缺的元素。

不过，科技的进步为我们提供了另一种选择——电子烟花。与传统鞭炮不同，电子烟花不会产生有害气体和噪音，更重要的是，它可以在电脑上轻松实现。

在电脑上燃放电子烟花

在电脑上制作电子烟花效果并不复杂，只需掌握一些基本的编程知识即可。下面，我们就来一步步了解一下如何实现这一效果：

准备工作
- 首先，您需要准备一个代码编辑器，例如Visual Studio Code或Sublime Text。
- 然后，创建一个新的项目并保存为“Fireworks.html”。
- 在文件中添加以下HTML代码：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      background-color: black;
    }
    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="fireworks.js"></script>
</body>
</html>

最后，创建一个名为“fireworks.js”的新文件，并添加以下JavaScript代码：

// 初始化画布
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 烟花参数
const numParticles = 100; // 烟花粒子数量
const particleSpeed = 10; // 粒子速度
const explosionRadius = 50; // 爆炸半径
const colors = ['#ff0000', '#00ff00', '#0000ff']; // 粒子颜色

// 创建粒子
const particles = [];
for (let i = 0; i < numParticles; i++) {
  const particle = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx: (Math.random() - 0.5) * particleSpeed,
    vy: (Math.random() - 0.5) * particleSpeed,
    color: colors[Math.floor(Math.random() * colors.length)]
  };
  particles.push(particle);
}

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

  // 更新粒子位置
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];
    particle.x += particle.vx;
    particle.y += particle.vy;

    // 粒子爆炸效果
    if (particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {
      particle.vx *= -1;
      particle.vy *= -1;
    }

    // 绘制粒子
    ctx.fillStyle = particle.color;
    ctx.fillRect(particle.x, particle.y, 2, 2);
  }

  // 递归调用绘制函数
  requestAnimationFrame(draw);
}

// 调用绘制函数
draw();

运行程序
- 双击“Fireworks.html”文件或将其拖入浏览器中。
- 您将看到一个黑色画布，烟花粒子在画布上随机移动。
调整效果
- 您可以通过修改“fireworks.js”文件中的参数来调整烟花效果：
  - numParticles： 增加此值将增加烟花粒子的数量。
  - particleSpeed： 增加此值将加快粒子速度。
  - explosionRadius： 增加此值将增加烟花爆炸的半径。
  - colors： 您可以更改此数组中的颜色以更改粒子颜色。