一、引言
跨年夜，五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端，我们能否通过技术手段复现这一梦幻场景呢？答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码，带你领略前端技术创造的惊艳画面。
用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效
二、整体架构分析
1，HTML 结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨年烟花特效</title>
<style>
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
background-color: black;
/* 设置背景颜色为黑色 */
}
canvas {
display: block;
/* 确保canvas元素以块级元素显示 */
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<!-- 创建一个canvas元素用于绘制烟花 -->
</body>
</html>
页面十分简洁，核心是一个 id 为 fireworks 的 元素，它就是我们绘制烟花的 “画布”。通过 JavaScript 代码将 canvas.width 和 canvas.height 设置为窗口的宽度和高度，使得烟花展示区域能自适应屏幕大小。同时，在 CSS 中把 body 和 html 的背景色设为黑色，隐藏溢出内容，以此营造出夜空般的氛围。
2，JavaScript 核心逻辑
代码主要围绕两个关键类 Firework 和 Particle 展开，以及一个动画函数 animate。fireworks 数组用于存储烟花对象，particles 数组用于存储烟花爆炸后产生的粒子对象。
三、Firework 类详解
1，构造函数
class Firework {
constructor() {
this.x = Math.random() * canvas.width; // 随机设置烟花的初始x坐标
this.y = canvas.height; // 设置烟花的初始y坐标为画布底部
this.targetY = Math