返回

绚丽新篇章，心动跨年夜

前端

跨年烟花盛宴：前端代码打造炫目之夜

随着 2023 年的临近，我们满怀期待地迎接一年一度的跨年盛典。绚烂的烟花无疑是跨年夜最引人注目的焦点，为我们带来视觉上的震撼与心灵的共鸣。为了让大家在家也能尽情享受烟花之美，本博客将详细分享 2023 年跨年烟花的前端开发代码。让我们一同用代码点亮夜空，谱写属于自己的跨年烟花故事吧！

HTML 代码：舞台搭建

首先，我们需要搭建一个舞台，让我们的烟花绽放于此。我们使用 HTML 来构建这个舞台，代码如下：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>

JS 代码：烟花绽放

有了舞台，接下来就轮到主角烟花登场了。JS 代码将负责烟花的创建、绘制和更新。代码如下：

// 获取 canvas 元素
var canvas = document.getElementById('canvas');

// 设置 canvas 宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取 canvas 上下文
var ctx = canvas.getContext('2d');

// 设置背景颜色
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 烟花数组
var fireworks = [];

// 定时器
var timer;

// 创建烟花
function createFirework() {
  // 随机位置
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;

  // 随机颜色
  var color = getRandomColor();

  // 随机速度
  var speed = Math.random() * 5 + 5;

  // 随机角度
  var angle = Math.random() * Math.PI * 2;

  // 创建烟花对象
  var firework = {
    x: x,
    y: y,
    color: color,
    speed: speed,
    angle: angle,
  };

  // 将烟花对象添加到数组中
  fireworks.push(firework);
}

// 绘制烟花
function drawFirework() {
  // 清除画布
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制烟花
  for (var i = 0; i < fireworks.length; i++) {
    var firework = fireworks[i];

    // 更新烟花位置
    firework.x += firework.speed * Math.cos(firework.angle);
    firework.y += firework.speed * Math.sin(firework.angle);

    // 绘制烟花
    ctx.fillStyle = firework.color;
    ctx.beginPath();
    ctx.arc(firework.x, firework.y, 5, 0, Math.PI * 2, true);
    ctx.fill();
  }
}

// 更新烟花
function updateFirework() {
  // 删除消失的烟花
  for (var i = fireworks.length - 1; i >= 0; i--) {
    var firework = fireworks[i];
    if (firework.y > canvas.height) {
      fireworks.splice(i, 1);
    }
  }

  // 更新烟花位置
  for (var i = 0; i < fireworks.length; i++) {
    var firework = fireworks[i];
    firework.x += firework.speed * Math.cos(firework.angle);
    firework.y += firework.speed * Math.sin(firework.angle);
  }
}

// 主函数
function main() {
  // 创建烟花
  createFirework();

  // 绘制烟花
  drawFirework();

  // 更新烟花
  updateFirework();

  // 循环执行
  timer = requestAnimationFrame(main);
}

// 获取随机颜色
function getRandomColor() {
  var colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#8B00FF'];
  return colors[Math.floor(Math.random() * colors.length)];
}

// 开始执行
main();

下载代码，点亮夜空

现在，你已经掌握了创建跨年烟花的代码。你可以点击以下链接下载完整的代码，在你的电脑上运行，让绚烂的烟花绽放于你的夜空：

下载 2023 年跨年烟花前端开发代码

结语：心随音乐舞，烟花绽放

跨年夜的钟声即将敲响，让我们用绚烂的烟花点亮夜空，用美妙的音乐陶醉人心。在这个辞旧迎新的时刻，愿我们的心随音乐舞动，愿我们的梦想随烟花绽放。让我们共同迎接 2023 年，期待新的一年里更多的惊喜与美好！

常见问题解答

  1. 如何自定义烟花的颜色和形状？

    你可以在 getRandomColor() 函数中修改颜色数组，添加或删除颜色。你也可以在 drawFirework() 函数中修改烟花的形状，例如绘制星星或心形。

  2. 如何控制烟花的发射频率和数量？

    你可以在 createFirework() 函数中调整烟花的发射频率和数量。增加或减少 setInterval() 函数中的时间间隔或同时发射的烟花数量。

  3. 如何添加音乐到烟花表演中？

    你可以在 HTML 代码中添加 <audio> 元素，并使用 JavaScript 控制音乐的播放。根据烟花的运动和效果，调整音乐的节奏和音量，营造更沉浸的体验。

  4. 如何将烟花保存为视频或 GIF？

    你可以使用第三方库或在线工具将烟花表演录制为视频或 GIF。例如，你可以使用 HTML2Canvas 库将 canvas 转换为图像，然后使用 ffmpeg 或其他工具创建视频。

  5. 如何让烟花适应不同屏幕尺寸？

    在 resize() 函数中调整 canvas 的宽高，使其与窗口大小相匹配。你还可以使用 CSS 媒体查询针对不同的屏幕尺寸设置不同的样式，确保烟花在任何设备上都能完美展示。