当前位置：首页 > news >正文

基于粒子系统与Canvas的烟花模拟器：从物理模型到交互实现

news 2026/7/25 23:38:37

在浏阳，我连续看了两场烟花盛宴，想实现烟花自由就来浏阳。这不仅仅是一句旅游宣传语，对于开发者而言，它背后隐藏着一个有趣的技术命题：如何用代码模拟一场绚烂的烟花表演，并实现“烟花自由”——即能够随心所欲地控制烟花的样式、颜色、轨迹和绽放效果。无论是用于前端数据可视化、游戏特效、节日庆典页面，还是作为学习图形学和动画编程的实践项目，用程序生成烟花都是一个极佳的切入点。本文将带你从零开始，使用现代前端技术栈（HTML5 Canvas + JavaScript）构建一个可交互的烟花模拟器。我们将从理解物理模型开始，逐步实现粒子系统、重力模拟、颜色渐变、鼠标交互，最终完成一个在浏览器中流畅运行的烟花秀，并探讨如何优化性能以实现“连续绽放”的盛宴效果。

1. 理解烟花模拟的核心：粒子系统与物理模型

烟花模拟的本质是一个粒子系统（Particle System）。每一个升空的烟花弹、每一颗炸开的火花，都可以看作是一个具有特定属性的粒子。我们的程序需要管理成千上万个这样的粒子，并按照物理规律更新它们的状态。

1.1 粒子的基本属性

一个烟花粒子至少需要包含以下属性来定义其在某一时刻的状态：

位置 (x, y)：粒子在画布上的坐标。
速度 (vx, vy)：粒子在水平和垂直方向上的移动速度。vy通常会受到重力影响而持续变化。
加速度 (ax, ay)：影响速度变化的力，最典型的就是重力加速度（ay = gravity）。
半径/大小 (radius)：粒子显示的大小。
颜色 (color)：粒子的颜色，可以是固定值，也可以随时间渐变或随机。
生命周期 (life, alpha)：粒子从诞生到消失的时间或透明度，用于实现淡出效果。
摩擦力/空气阻力 (friction)：一个小于1的系数，用于模拟速度逐渐衰减，使运动更真实。

1.2 烟花的两阶段运动模型

一场完整的烟花动画包含两个主要阶段：

发射阶段 (Launch)：一个或多个粒子（烟花弹）以初始速度从底部向上发射。此阶段通常忽略空气阻力，主要受重力影响做匀减速（上升）或匀加速（下落）运动。
爆炸阶段 (Explosion)：当烟花弹到达预设高度或速度接近零时，触发爆炸。爆炸会瞬间生成大量新的粒子（火花），这些粒子从爆炸中心向四面八方以随机速度散开。火花粒子除了受重力下坠外，还受到显著的空气阻力（摩擦力）影响，速度会快速衰减，同时生命周期结束，最终消失。

理解了这两个阶段，我们就有了清晰的编码目标：创建Particle类来封装粒子属性，创建Firework类来管理发射弹和爆炸逻辑，最后用一个主循环 (requestAnimationFrame) 来驱动所有粒子的更新与绘制。

2. 环境准备与项目结构

本项目完全基于浏览器原生技术，无需安装任何第三方库或构建工具。你只需要一个现代浏览器（如 Chrome、Edge、Firefox）和一个代码编辑器（如 VS Code）。

2.1 创建项目文件

在你的工作目录下，创建三个文件：

index.html: 主 HTML 文件，包含 Canvas 画布。
style.css: 简单的样式文件，用于让画布全屏。
script.js: 主要的 JavaScript 逻辑文件。

项目结构如下：

fireworks-simulator/ ├── index.html ├── style.css └── script.js

2.2 基础 HTML 与 CSS 设置

首先，在index.html中创建画布并引入资源。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浏阳烟花模拟器 - 实现你的烟花自由</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎆</text></svg>"> </head> <body> <canvas id="fireworksCanvas"></canvas> <div class="controls"> <button id="launchBtn">发射一枚烟花</button> <button id="autoBtn">自动连续发射</button> <button id="clearBtn">清空画面</button> <div class="slider-container"> <label for="gravitySlider">重力强度：</label> <input type="range" id="gravitySlider" min="0" max="20" value="10" step="1"> <span id="gravityValue">0.1</span> </div> </div> <script src="script.js"></script> </body> </html>

在style.css中，我们让画布充满全屏，并设置一个深色背景来衬托烟花。

* { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: radial-gradient(ellipse at bottom, #0d1b2a 0%, #000000 100%); height: 100vh; font-family: sans-serif; color: #ccc; } #fireworksCanvas { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .controls { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); padding: 15px 25px; border-radius: 10px; display: flex; gap: 15px; align-items: center; z-index: 2; flex-wrap: wrap; justify-content: center; } .controls button { padding: 10px 20px; border: none; border-radius: 5px; background: linear-gradient(to right, #ff7e5f, #feb47b); color: #000; font-weight: bold; cursor: pointer; transition: transform 0.1s; } .controls button:hover { transform: scale(1.05); } .controls button:active { transform: scale(0.95); } .slider-container { display: flex; align-items: center; gap: 10px; } #gravitySlider { width: 120px; }

3. 核心 JavaScript 实现：从粒子到烟花秀

现在进入核心部分script.js。我们将按照自底向上的顺序构建：粒子 -> 烟花 -> 系统管理。

3.1 实现 Particle 粒子类

Particle类是整个系统的基础。它负责存储自身状态，并在每一帧更新位置、速度，并绘制自己。

// script.js const canvas = document.getElementById('fireworksCanvas'); const ctx = canvas.getContext('2d'); // 初始化画布尺寸 function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // 初始调用 class Particle { constructor(x, y, vx, vy, color, radius, gravity, friction, life = 1.0) { this.x = x; this.y = y; this.vx = vx; // 水平速度 this.vy = vy; // 垂直速度 this.color = color; this.radius = radius; this.gravity = gravity; // 重力加速度 this.friction = friction; // 摩擦力系数 (0~1) this.life = life; // 初始生命值 this.alpha = 1.0; // 初始透明度，随life减少 this.decay = 0.015 + Math.random() * 0.01; // 生命衰减速率，略有随机 } update() { // 应用摩擦力（减缓速度） this.vx *= this.friction; this.vy *= this.friction; // 应用重力（只影响垂直速度） this.vy += this.gravity; // 更新位置 this.x += this.vx; this.y += this.vy; // 衰减生命 this.life -= this.decay; this.alpha = this.life; // 透明度与生命值绑定 } draw() { if (this.life <= 0) return; ctx.save(); ctx.globalAlpha = this.alpha; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); // 添加发光效果 ctx.shadowBlur = 15; ctx.shadowColor = this.color; ctx.fill(); ctx.restore(); } isDead() { return this.life <= 0; } }

关键参数解释：

friction：通常设置为0.99或0.98，使粒子速度每帧减少1%-2%，模拟空气阻力。值越小，减速越快。
gravity：重力加速度，典型值为0.1到0.2。这个值会直接加到垂直速度vy上。
decay：生命衰减速率，决定了粒子存活的帧数。0.015表示大约1/0.015 ≈ 66帧后生命结束。

3.2 实现 Firework 烟花类

Firework类管理一个完整的烟花生命周期：一个发射弹（也是粒子）升空，然后爆炸生成多个火花粒子。

class Firework { constructor(startX, startY, targetX, targetY, gravity) { // 发射弹属性 this.x = startX; this.y = startY; this.startY = startY; this.targetX = targetX; this.targetY = targetY; this.gravity = gravity; // 计算发射所需的速度（简单的弹道计算） const dx = targetX - startX; const dy = targetY - startY; // 使用一个固定的“力度”和角度来计算初速度 const angle = Math.atan2(dy, dx); const speed = 12 + Math.random() * 3; // 随机速度 this.vx = Math.cos(angle) * speed; this.vy = Math.sin(angle) * speed; this.color = `hsl(${Math.random() * 360}, 100%, 60%)`; // 随机鲜艳颜色 this.radius = 3; this.particles = []; // 存储爆炸后的火花粒子 this.exploded = false; } update() { if (!this.exploded) { // 更新发射弹 this.vy += this.gravity; // 重力影响 this.x += this.vx; this.y += this.vy; // 简单爆炸条件：速度方向反转（到达最高点）或接近目标 if (this.vy >= 0) { // 开始下落时爆炸 this.explode(); } } // 更新所有爆炸后的火花粒子 for (let i = this.particles.length - 1; i >= 0; i--) { this.particles[i].update(); if (this.particles[i].isDead()) { this.particles.splice(i, 1); } } } explode() { this.exploded = true; const particleCount = 80 + Math.random() * 50; // 随机火花数量 for (let i = 0; i < particleCount; i++) { // 随机角度和速度 const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 5 + 2; // 2-7的随机速度 const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed; // 火花颜色可以基于烟花弹颜色做微调 const hue = parseInt(this.color.substring(4, this.color.length - 1)); const sparkHue = (hue + Math.random() * 60 - 30) % 360; const sparkColor = `hsl(${sparkHue}, 100%, ${60 + Math.random() * 20}%)`; // 创建火花粒子，摩擦力更大，重力更小，生命周期随机 const particle = new Particle( this.x, this.y, vx, vy, sparkColor, Math.random() * 2 + 1, // 半径 1-3 this.gravity * 0.3, // 火花重力减弱 0.95 + Math.random() * 0.03, // 摩擦力 0.95-0.98 0.8 + Math.random() * 0.4 // 初始生命值 ); this.particles.push(particle); } } draw() { if (!this.exploded) { // 绘制发射弹（一条拖尾线） ctx.save(); ctx.globalAlpha = 0.7; ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.x - this.vx * 0.5, this.y - this.vy * 0.5); ctx.strokeStyle = this.color; ctx.lineWidth = this.radius; ctx.stroke(); ctx.restore(); } // 绘制所有火花粒子 this.particles.forEach(particle => particle.draw()); } isDone() { // 烟花结束：已爆炸且所有火花粒子都消失了 return this.exploded && this.particles.length === 0; } }

关键逻辑解释：

发射速度计算：这里使用了一个简化的模型，根据起点和终点计算角度，并赋予一个随机速度。更真实的模拟可以加入初始爆发力。
爆炸条件：if (this.vy >= 0)是一个简单有效的判断。当垂直速度从负（向上）变为非负（向下或零）时，说明达到了运动轨迹的最高点，此时触发爆炸。
火花生成：爆炸时，在360度全方向随机生成大量粒子。通过调整speed、gravity和friction，可以模拟不同“质感”的烟花，如柳絮状（高摩擦力、低重力）或菊花状（速度均匀）。

3.3 构建烟花系统与动画循环

现在我们需要一个管理器来存放所有的烟花实例，并创建动画循环来驱动整个系统。

class FireworksSystem { constructor() { this.fireworks = []; this.gravity = 0.1; // 全局重力 this.autoLaunchInterval = null; this.isAutoLaunching = false; this.initControls(); } // 初始化UI控制 initControls() { const launchBtn = document.getElementById('launchBtn'); const autoBtn = document.getElementById('autoBtn'); const clearBtn = document.getElementById('clearBtn'); const gravitySlider = document.getElementById('gravitySlider'); const gravityValue = document.getElementById('gravityValue'); // 手动发射 launchBtn.addEventListener('click', () => { this.launchRandom(); }); // 自动连续发射 autoBtn.addEventListener('click', () => { if (this.isAutoLaunching) { this.stopAutoLaunch(); autoBtn.textContent = '自动连续发射'; } else { this.startAutoLaunch(); autoBtn.textContent = '停止自动发射'; } }); // 清空画面 clearBtn.addEventListener('click', () => { this.fireworks = []; }); // 重力调节 gravitySlider.addEventListener('input', (e) => { // 将滑块值(0-20)映射到重力值(0-0.2) this.gravity = e.target.value / 100; gravityValue.textContent = this.gravity.toFixed(2); }); gravityValue.textContent = this.gravity.toFixed(2); // 鼠标点击发射 canvas.addEventListener('click', (e) => { this.launchFromBottom(e.clientX, e.clientY); }); } launchRandom() { const startX = canvas.width / 2; // 从底部中央发射 const startY = canvas.height; const targetX = Math.random() * (canvas.width * 0.6) + (canvas.width * 0.2); // 目标水平位置随机 const targetY = Math.random() * (canvas.height * 0.4) + 100; // 目标高度随机 this.fireworks.push(new Firework(startX, startY, targetX, targetY, this.gravity)); } launchFromBottom(targetX, targetY) { const startX = targetX; // 从点击点的正下方发射 const startY = canvas.height; this.fireworks.push(new Firework(startX, startY, targetX, targetY, this.gravity)); } startAutoLaunch() { this.isAutoLaunching = true; // 每隔 300-800 毫秒随机发射一枚 this.autoLaunchInterval = setInterval(() => { this.launchRandom(); }, 300 + Math.random() * 500); } stopAutoLaunch() { this.isAutoLaunching = false; if (this.autoLaunchInterval) { clearInterval(this.autoLaunchInterval); this.autoLaunchInterval = null; } } update() { // 更新所有烟花 for (let i = this.fireworks.length - 1; i >= 0; i--) { this.fireworks[i].update(); // 移除已完成的烟花 if (this.fireworks[i].isDone()) { this.fireworks.splice(i, 1); } } } draw() { // 每一帧用半透明的黑色矩形覆盖上一帧，形成拖尾效果 ctx.fillStyle = 'rgba(13, 27, 42, 0.2)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制所有烟花 this.fireworks.forEach(firework => firework.draw()); } animate() { this.update(); this.draw(); requestAnimationFrame(() => this.animate()); } start() { this.animate(); } } // 启动系统 const system = new FireworksSystem(); system.start();

系统核心机制：

动画循环：requestAnimationFrame是浏览器提供的用于制作动画的API，它会以屏幕刷新率（通常60fps）调用回调函数。在animate方法中，我们循环调用update和draw。
拖尾效果：ctx.fillStyle = 'rgba(13, 27, 42, 0.2)';这一行是关键。它用带有透明度的背景色覆盖整个画布，而不是完全清空。这样前一帧的粒子会留下淡淡的痕迹，形成美丽的运动轨迹和光晕。
性能管理：在update方法中，我们遍历烟花数组，并移除已经爆炸且所有火花粒子都消失的烟花 (isDone())。这是防止数组无限增长、导致性能下降的重要步骤。

4. 运行验证与效果调优

现在，双击打开index.html文件，你应该能看到一个深色星空背景的页面。点击“发射一枚烟花”按钮或直接点击画布，烟花就会从底部升起并绽放。点击“自动连续发射”，即可模拟浏阳夜空中“连续两场烟花盛宴”的壮观景象。

4.1 关键参数调优表

通过修改以下参数，你可以创造出风格迥异的烟花效果：

参数	所在位置	作用	推荐调整范围	效果影响
全局重力 (`gravity`)	`FireworksSystem`构造函数及滑块	影响所有粒子的下落加速度。	0.05 - 0.2	值越小，烟花升得越高，火花飘散越慢；值越大，下落越快，爆炸更急促。
发射弹速度 (`speed`)	`Firework`构造函数	决定烟花弹升空的速度和高度。	10 - 15	值越大，发射越高，轨迹越直；值小则抛物线平缓。
火花数量 (`particleCount`)	`Firework.explode()`方法	单次爆炸产生的火花粒子数。	50 - 150	数量越多越绚烂，但性能消耗越大。
火花初始速度 (`speed`)	`Firework.explode()`内层循环	决定爆炸的扩散范围和力度。	2 - 8	值越大，爆炸范围越广，火花飞散越猛。
火花摩擦力 (`friction`)	`Firework.explode()`创建粒子时	模拟空气阻力，使火花速度衰减。	0.92 - 0.99	值越小，火花减速越快，爆炸形状更“团”；值越大，火花飞得更远更持久。
*火花重力 (`gravity 0.3`)**	`Firework.explode()`创建粒子时	火花粒子单独受到的重力，通常比发射弹小。	`全局重力 * 0.2 ~ 0.5`	值越小，火花飘浮感越强；值越大，火花下坠越快。
生命衰减 (`decay`)	`Particle`构造函数	粒子透明度和生命值的减少速度。	0.01 - 0.03	值越大，火花消失越快；值小则拖尾更长。
拖尾透明度 (`rgba(... , 0.2)`)	`FireworksSystem.draw()`	覆盖画布的透明度，形成拖尾。	0.1 - 0.3	值越小，拖尾痕迹越长越淡；值越大，画面刷新越快，轨迹越短。

4.2 实现“浏阳烟花”特色效果

浏阳烟花以花色繁多、造型独特著称。我们可以通过修改爆炸算法来模拟几种经典效果：

圆形菊花状：上述基础代码实现的就是近似效果。

心形：修改explode方法中粒子的发射角度计算。

// 在心形爆炸中替换角度随机生成部分 // const angle = Math.random() * Math.PI * 2; // 原随机角度 const t = Math.random() * Math.PI * 2; const angle = t; // 角度不变 const radius = 15 * (1 - Math.sin(t)); // 心形极坐标方程简化 const speed = Math.random() * 3 + radius * 0.1; // 速度与半径相关 const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed;

环状/多重环状：让粒子在特定角度区间内发射，并分层。

// 双层环状爆炸 const ring = Math.floor(Math.random() * 2); // 0 或 1，决定内环外环 const baseAngle = Math.random() * Math.PI * 2; const spread = Math.PI / 6; // 30度扇形 const angle = baseAngle + (Math.random() - 0.5) * spread; const speed = ring === 0 ? 3 : 6; // 内环慢，外环快

5. 常见问题排查与性能优化

在开发或运行过程中，你可能会遇到以下问题：

5.1 烟花不显示或立即消失

现象：点击按钮或画布，看不到烟花弹或爆炸。
排查：
1. 打开浏览器开发者工具（F12），查看Console标签页是否有红色报错（如Uncaught TypeError）。
2. 检查script.js文件是否被正确引入，路径是否正确。
3. 在Firework.explode()方法开始处添加console.log(‘爆炸！’, this.x, this.y)，查看爆炸是否被触发。
4. 检查Particle.draw()方法中的ctx.globalAlpha是否设置过低，或life衰减过快 (decay值过大)。
解决：根据控制台错误修正代码。确保画布上下文ctx获取成功。调整decay值为0.01左右再测试。

5.2 动画卡顿、掉帧

现象：自动发射大量烟花后，动画变得不流畅。
排查：
1. 在FireworksSystem.update()开始处添加console.log(‘烟花数量：’, this.fireworks.length, ‘粒子总数：’, this.fireworks.reduce((sum, fw) => sum + fw.particles.length, 0))，监控粒子数量。
2. 确认isDone()逻辑正确，能及时清理已完成的烟花对象。
解决：
- 限制粒子总数：在Firework.explode()中，根据性能情况减少particleCount。
- 优化绘制：Particle.draw()中的ctx.shadowBlur非常耗性能。可以改为只对部分粒子使用，或完全移除。
- 使用离屏Canvas：对于大量重复绘制的粒子，可以考虑使用离屏Canvas进行缓存，但本项目粒子状态变化频繁，收益可能不高。
- 降低自动发射频率：增加setInterval的时间间隔。

5.3 烟花轨迹不自然或闪烁

现象：烟花弹或火花的运动轨迹生硬，或有明显的闪烁感。
排查：
1. 检查animate循环是否稳定运行，没有因为异常而中断。
2. 检查ctx.fillStyle = ‘rgba(…, 0.2)’这行代码的透明度值。如果值太大（如0.5），拖尾太短会闪烁；值太小（如0.05），残影过长会模糊。
3. 检查重力 (gravity) 和摩擦力 (friction) 的值是否在合理范围内。极端的值会导致运动突变。
解决：将拖尾透明度调整到0.15到0.25之间。确保重力值在0.05~0.2，摩擦力在0.95~0.99。

5.4 控制滑块不生效

现象：调节重力滑块，烟花下坠速度没有变化。
排查：
1. 检查滑块input事件监听器是否绑定成功。
2. 在事件监听器内添加console.log(‘重力值：’, this.gravity)，查看值是否变化。
3. 检查Firework和Particle的构造函数，是否正确地使用了传入的gravity参数，而不是一个写死的常量。
解决：确保Firework和Particle实例在创建时，使用的是系统当前this.gravity值。对于已存在的粒子，修改全局重力不会影响其生命周期，只会影响新创建的烟花。

6. 生产环境最佳实践与扩展方向

这个演示项目为了清晰易懂，将逻辑都写在了一个文件中。在实际生产环境或更复杂的应用中，可以考虑以下优化和扩展：

6.1 代码结构优化

模块化：将Particle,Firework,FireworksSystem拆分成独立的 ES6 模块文件，便于维护和复用。
配置化：将所有可调参数（颜色、数量、速度、物理常量）提取到一个配置对象中，方便管理和实现不同的烟花主题。
使用 TypeScript：为粒子属性、烟花状态等定义清晰的接口，减少运行时错误。

6.2 性能与体验优化

粒子池：创建和销毁大量Particle对象会触发垃圾回收，可能导致卡顿。可以预先初始化一个粒子对象池，循环使用。
绘制优化：当粒子数量极大时，可以将多个颜色、大小相近的粒子合并，使用CanvasRenderingContext2D.putImageData或 WebGL 进行批量绘制，性能有数量级提升。
音效：添加同步的音效可以极大提升沉浸感。使用 Web Audio API 在爆炸时播放对应的声音。
响应式适配：确保画布在移动设备上也能正确显示和交互，可能需要调整粒子大小和发射逻辑。