企业官网建设流程全解析

离除夕还有几天的时候，我决定给自己写一个烟花模拟器。起因很简单：今年回不了老家，朋友圈里全是视频烟花，但隔着屏幕总觉得少了点参与感。与其看别人放，不如自己做一场满屏流光炸开、鼠标一点就原地过年的特效页面。我把这个想法落地成了一款纯前端实现的网页烟花模拟器，写完后分享到技术群里，结果当天晚上就有十几个人来问代码。这篇文章就把整个项目的设计思路、核心算法、实现细节和踩坑记录完整复盘一遍，想自己写烟花页面的朋友可以直接照抄。

这个项目说穿了是一个基于 Canvas 的粒子特效系统：鼠标点击或者点击按钮后，一个光球拖着尾巴升到空中，在最高点炸开，化作几十上百个彩色粒子，受重力影响下落、衰减、最终消失。听起来不复杂，但因为涉及粒子运动、颜色管理、性能优化、设备适配，完整做下来还是有不少值得讲的细节。它也完全不需要后端，一个 HTML 文件就能跑，适合作为新年礼物页面、个人主页彩蛋，或者纯粹用来练手 Canvas 特效。

1. 整体设计与技术选型：一秒钟的惊艳背后有什么

1.1 这个项目到底在做什么

很多人第一次看到烟花模拟器，会觉得它只是个“画点颜色的小玩意”。但真正动手做你就会发现，要模拟一场让人“哇”出来的烟花，至少得解决四个问题：

• 视觉效果要有“真实感”。烟花之所以好看，是因为它有一个从亮到暗、从聚到散的过程，不是一堆圆点杵在屏幕上。
• 运动轨迹要符合直觉。光球上升要带一点轻微的摆动，爆炸后粒子要受重力影响往下飘，不能像塑料袋一样直直浮在半空。
• 性能必须稳。一个画面里同时存在几百上千个粒子，如果代码写得糙，帧率会掉到个位数，气氛瞬间归零。
• 交互要自然。点击屏幕就要有烟花在点击位置炸开，而不是等一个延时，或者只在固定位置播放。

这四个问题指向的答案是同一个：用 Canvas 2D + requestAnimationFrame 写一个粒子系统。这个组合的好处在于，Canvas 2D 有极好的兼容性和足够高的绘制效率，几乎不需要任何外部依赖；requestAnimationFrame 会自动适配屏幕刷新率，还能在标签页切到后台时自动暂停，省电又省心。

1.2 为什么不用 WebGL、CSS 动画或者现成库

有人可能会问，WebGL 做粒子特效不是更专业吗？Three.js 里也有烟花 demo。我的观点是：杀鸡别用牛刀。WebGL 虽然性能天花板更高，但学习成本、代码复杂度、兼容性调试成本都上来了，为了一个装饰性效果完全不值得。Canvas 2D 在几千个粒子的规模下完全能跑到稳定 60 帧，已经足够了。

CSS 动画也不适合。倒不是说 CSS 做不出火花飞溅的效果，而是烟花粒子有复杂的随机性、衰减规则、相互叠加，用 CSS 管理成百上千个独立动画，会变成一场灾难：DOM 节点爆炸、动画时间线难以同步、性能直线下降。粒子系统本质上是“数据驱动渲染”，用 CSS 来表达这件事，等于拿勺子舀大海。

现成的粒子库（比如 particles.js）确实能用，但要定制烟花特有的“升空-爆炸-衰减”状态机反而更麻烦，因为通用粒子库不会为“烟花”这个具体场景做优化，代码体积还不小。自己写一个粒子类，结构完全可控，后续加文字烟花、心形烟花、音乐联动都更容易，这也是做项目最值钱的部分。

2. 粒子系统原理：把一场烟花拆成数学公式

2.1 一粒火花的一生

我习惯用一个“状态机”来理解一个烟火花火粒子的生命周期，它大概经历四个阶段：

• 状态 A（升空阶段）：一个明亮的弹体从画布底部出发，向上飞行。此时它整体是一个光点，尾部拖一条逐渐淡出的轨迹，速度会随着时间略微降低。
• 状态 B（爆炸点）：弹体到达设定高度（通常是画布高度的一定比例，比如 60%-85%），速度降到一个阈值附近，触发爆炸。
• 状态 C（飞散阶段）：爆炸会生成几十个体积更小的次级粒子，继承爆炸点的位置，但速度方向随机分布在一个圆形（或其他形状）的范围内。
• 状态 D（衰减阶段）：次级粒子受到重力影响，抛物线式落地；同时透明度随寿命衰减，直到完全消失。

我用一个粒子位置、速度、寿命循环，核心思路是“每一帧都先更新粒子状态，再一次性把全部粒子画到画布上”。粒子对象大致长这样：

class Particle { constructor(x, y, vx, vy, hue, life, size) { this.x = x; // 当前 x 坐标 this.y = y; // 当前 y 坐标 this.vx = vx; // 水平方向速度，单位是 像素/帧 this.vy = vy; // 垂直方向速度，负值代表向上 this.hue = hue; // HSL 色相值，0-360 this.life = life; // 剩余寿命，单位是帧 this.maxLife = life; // 最大寿命，用于计算透明度比例 this.size = size; // 粒子半径，单位是像素 } update(gravity, drag) { this.vy += gravity; // 每帧施加一个向下的加速度 this.vx *= drag; // 空气阻力，让粒子慢慢减速 this.vy *= drag; this.x += this.vx; this.y += this.vy; this.life -= 1; // 寿命递减 } draw(ctx) { const alpha = Math.max(this.life / this.maxLife, 0); ctx.globalAlpha = alpha; ctx.fillStyle = `hsla(${this.hue}, 90%, 60%, ${alpha})`; ctx.beginPath(); ctx.arc(this.x, this.y, this.size * alpha, 0, Math.PI * 2); ctx.fill(); } }

alpha = life / maxLife这个比例非常关键。粒子刚爆炸时最亮，随着寿命减少逐渐透明，最后消失，视觉上就像火花在夜空中燃尽，真实感立刻上来了。

2.2 爆炸形态设计：圆形、心形还是文字

粒子爆炸时的“形状”，本质上是通过给粒子赋予不同的初始速度方向来实现的。圆形爆炸最简单：随机角度取 0 到 2π，随机一个速度值，然后分解成 vx、vy：

for (let i = 0; i < particleCount; i++) { const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 4 + 2; const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed; }

想做出“光环”效果，就让所有粒子的速度大小固定（去掉Math.random() * 4），只剩角度随机，效果就是一个匀速扩张的圆环。想做出心形，需要用心形参数方程：

// 心形参数方程，t 取 0 到 2π const x = 16 * Math.pow(Math.sin(t), 3); const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);

把 x、y 当作粒子的初始速度向量，再乘一个展开系数，就能得到一颗心形炸开的烟花。我实际试过，心形烟花特别受女同事欢迎，适合做成“给女朋友的跨年页面”。文字烟花则稍微特殊一点：先用一个离屏 canvas 绘制要显示的文字，然后逐像素读取，把所有有颜色的像素点坐标存进数组，爆炸时让粒子以这些坐标为初速度四散开来。这个原理并不复杂，但视觉效果相当惊艳，后面扩展部分我还会细讲。

2.3 颜色体系：为什么你看到的烟花五颜六色

颜色是最容易被忽略、却最影响观感的部分。我最初用rgb()随机取色，结果画面特别脏，红一块紫一块，像颜料盘打翻了。后来我全部切换到 HSL 色相体系：把每个粒子绑定一个 hue 值，颜色统一用hsla(hue, saturation, lightness, alpha)来表达。

真实烟花的颜色是有规律的：通常是同一色调往旁边轻微偏移，形成“主色 + 渐变”，而不是毫无章法的彩虹混搭。我常用的做法是爆炸时取一个随机 hue（比如 0 到 360），再让每个粒子在hue ± 20的范围内波动，这样整个爆炸区域的颜色既丰富又统一。金色效果更好：把色相固定在 45 到 55 之间，亮度和饱和度都调高，放出来的烟花特别有“过年鎏金”质感。银白火焰则是低饱和高亮度，hue 在 180 附近，适合做“雪花蓝银烟花”。

3. 核心代码逐段拆解：可抄作业的完整方案

3.1 基础框架：画布、画刷与主循环

开头先初始化 Canvas 画布并适配窗口大小。这里有一个容易踩的坑：直接设置canvas.width = window.innerWidth在小屏手机上会特别模糊，因为物理像素和 CSS 像素不是一回事。正确做法是读取window.devicePixelRatio，把画布的实际分辨率放大，再用 CSS 把画布撑满屏幕，这样在 Retina 屏上依然锐利。

const canvas = document.getElementById('fireworksCanvas'); const ctx = canvas.getContext('2d'); function resizeCanvas() { const dpr = window.devicePixelRatio || 1; const width = window.innerWidth; const height = window.innerHeight; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; canvas.width = width * dpr; canvas.height = height * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } window.addEventListener('resize', resizeCanvas); resizeCanvas();

主循环需要同时管理“烟花弹体”和“爆炸粒子”两个数组。每一帧做这些事：

• 清屏。注意不是真的清空，而是用半透明黑色覆盖一层，形成拖尾效果。
• 更新所有弹体的位置；检查弹体是否到达爆炸高度，是则生成粒子并从数组移除。
• 更新所有粒子的速度和位置；移除寿命归零的粒子。
• 统一绘制所有物体。

function createFirework(targetX, targetY) { rockets.push(new Rocket(targetX, targetY)); } function loop() { // 半透明黑覆盖，形成渐变拖尾，注意固定 alpha 值不能太大 ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 更新弹体 for (let i = rockets.length - 1; i >= 0; i--) { rockets[i].update(); if (rockets[i].shouldExplode()) { explode(rockets[i]); rockets.splice(i, 1); } else { rockets[i].draw(ctx); } } // 更新粒子 for (let i = particles.length - 1; i >= 0; i--) { particles[i].update(0.03, 0.98); if (particles[i].life <= 0) { particles.splice(i, 1); } else { particles[i].draw(ctx); } } requestAnimationFrame(loop); } requestAnimationFrame(loop);

拖尾效果里这个rgba(0,0,0,0.15)很有讲究。数值太大，粒子刚画出来就糊掉；数值太小，拖尾变得又长又鬼影。我反复对比后觉得 0.12 到 0.2 之间最合适。另外要注意这里覆盖的范围应该用画布的坐标空间，如果在高 DPI 屏上直接用了像素坐标，容易出现只擦掉一半的问题，所以我在 resize 时用setTransform统一处理。

3.2 升空弹与爆炸粒子的实现

弹体的实现核心是：从底部出发，向目标点（通常是鼠标点击位置或随机点）移动。为了真实，我不会让它直线飞，而是给一个额外的水平漂移量，配合轻微的摩擦衰减，看起来就像一枚真正的烟花弹在空中一边升空一边微摆。

class Rocket { constructor(targetX, targetY) { this.x = canvas.width / 2; // 默认从画布中下部发射 this.y = canvas.height; this.targetX = targetX; this.targetY = targetY; const angle = Math.atan2(targetY - this.y, targetX - this.x); const speed = 10; // 固定初速度 this.vx = Math.cos(angle) * speed; this.vy = Math.sin(angle) * speed; } update() { // 弹体只受到轻微阻力，保留摆动感 this.vx *= 0.99; this.vy *= 0.995; this.x += this.vx; this.y += this.vy; } shouldExplode() { const dx = this.x - this.targetX; const dy = this.y - this.targetY; return dx * dx + dy * dy < 100; // 距离小于 10 像素时就爆炸 } draw(ctx) { ctx.globalAlpha = 1; ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fill(); } }

爆炸函数负责在一瞬间生成大量粒子，这也是整屏流光效果的主要来源。我给一个弹体的默认粒子数设在 70 到 90 之间，太多会卡，太少不够丰满。粒子数有个体差异，可以让大烟花更壮观：

function explode(rocket) { const particleCount = Math.floor(Math.random() * 20) + 70; const baseHue = Math.random() * 360; for (let i = 0; i < particleCount; i++) { const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 4 + 2; const hue = baseHue + (Math.random() * 40 - 20); particles.push({ x: rocket.x, y: rocket.y, vx: Math.cos(angle) * speed * 0.5, vy: Math.sin(angle) * speed * 0.5, hue: hue, size: Math.random() * 2 + 1, life: Math.floor(Math.random() * 30) + 50, }); } }

3.3 颜色与光晕怎么调出高级感

很多初学 Canvas 的伙伴画粒子就是一个小小的实心圆，效果干巴巴的。想让粒子有“发光”的感觉，最简单有效的方法是叠画：用shadowBlur给粒子加光晕，或者用两层圆叠出渐变感。前者代码少但性能开销大，粒子一多就掉帧；后者性能更好，是自己画一个中心亮边缘淡的渐变圆。

我推荐把性能放在第一位，所以采用“双层绘制”方案。第一层画略微大一点的半透明圆，第二层画高亮的小圆，视觉上自然形成光晕，而且成本可控：

function drawGlowParticle(ctx, p) { const alpha = Math.max(p.life / 60, 0); ctx.globalAlpha = alpha * 0.4; ctx.fillStyle = `hsla(${p.hue}, 90%, 60%, 1)`; ctx.beginPath(); ctx.arc(p.x, p.y, p.size * 2.5, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = alpha; ctx.fillStyle = `hsla(${p.hue}, 90%, 75%, 1)`; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); }

刚才那个粒子队列里还应该给每个粒子标记一下它属于哪一场爆炸，这样可以在同一帧里对不同爆炸区做差异化透明度处理。不过初期版本这样已经够用，后面性能优化时再调整。

4. 性能优化与设备适配：过年不要卡成PPT

4.1 粒子数量限制与对象池

烟花特效最大的性能敌人不是“绘制”本身，而是频繁地创建和销毁粒子对象。每次爆炸生成七八十个对象，一秒放十次就是七百八十个，垃圾回收机制会被频繁触发，产生肉眼可见的卡顿。

解决方案至少有两条路。第一条是限制粒子总量：开一个上限，比如 1500 个粒子，超过时优先让旧粒子快速衰减，或者直接丢弃多余的新粒子。第二条更优雅：用对象池，事先创建一批粒子对象，爆炸时从池里取，粒子消失后归还。虽然对象池在纯前端的小项目里稍显啰嗦，但对体验提升非常明显，特别是在低端安卓机上。

const MAX_PARTICLES = 1200; const particlePool = []; function getParticle() { return particlePool.pop() || {}; } function recycleParticle(p) { if (particlePool.length < MAX_PARTICLES * 2) { particlePool.push(p); } }

使用对象池后每帧不再有大量对象被创建销毁，帧率曲线会平滑很多。我在自测时用 Chrome DevTools 的 Performance 面板盯过，对象池方案让 GC 次数减少了大概一半以上。

4.2 设备像素比与低端机降级

前面已经提到devicePixelRatio带来的清晰度问题。高 DPR 机型会把画布分辨率放大到物理像素级别，但如果你的手机是 2 倍 DPR 同时又是一台中端机，720p 的实际分辨率放大 2 倍可能会让 GPU 压力翻好几倍。我的处理方式是做一层降级：检测设备型号或者粗略估算 DPR 值，超过 2 就强制把绘制分辨率锁定在 2，这样可以兼顾清晰度和性能。

另外一个常被忽略的问题是“后台标签页”的处理。requestAnimationFrame 在后台会自动暂停，这本来是好事；但如果用户切到别的标签页再切回来，你会发现烟花静止了很久，然后再一下子暴走式更新，因为之前积压的帧被追帧执行了。解决方案也很简单：记录lastTime，计算帧间隔deltaTime，超过 200 毫秒就直接丢弃这一帧的时间重置，而不是让粒子跳变。

let lastTime = 0; function loop(timestamp) { const deltaTime = timestamp - lastTime; lastTime = timestamp; if (deltaTime > 200) { requestAnimationFrame(loop); return; } // 其余更新逻辑同一帧进行 // 如果追求更精确，可以把 deltaTime 归一化后乘到粒子速度上 requestAnimationFrame(loop); }

移动端的另一个隐藏坑是浏览器地址栏收缩和屏幕旋转会触发 resize 事件，导致画布尺寸变化。我加了一个 200ms 的防抖：resize 触发后 200ms 内只做一次真实重置，避免频繁重新分配画布内存。

4.3 用帧率监控验证效果

不要凭感觉判断卡不卡，写一个简单的帧率监控很有必要。我加了 FPS 计数，每帧让计数器加一，每秒钟更新一次 UI：

let fps = 0; let frames = 0; let lastFpsTime = 0; function loop(timestamp) { frames++; if (timestamp - lastFpsTime >= 1000) { fps = frames; frames = 0; lastFpsTime = timestamp; document.getElementById('fps').textContent = fps; } // ... }

调试阶段把帧率显示在小角落，发布时隐藏。我测试的场景是连续自动放烟花五分钟后，iPhone 12 保持 60fps，三年前的千元安卓机在粒子上限下调到 700 后也能稳定在 40fps 左右，肉眼基本可接受。

5. 常见问题与排查技巧：我踩过的坑

5.1 问题速查表

我把开发过程中遇到的高频问题整理成了表格，每一个都是实际踩过坑后才总结出来的：

5.2 经验技巧与调试工具

调试 Canvas 粒子效果有一个特别好使的手段：暂停按钮加单步执行。我通常在代码里留一个debugFlag，打开开发者工具后在 Console 里手动执行debugFlag = true，再配合debugStep()函数每帧只运行一次。这样可以精确观察一个弹体在升空哪个位置触发爆炸、粒子的飞行状态是否符合预期，比盯着动画盲猜高效十倍。

另一个技巧是把“随机种子”固定住。烟花效果是随机生成的，调颜色时如果每次刷新都不一样，根本没法对比。我写了一个简单的伪随机函数替换Math.random()，调试时固定种子，上线时再换回原生随机。这样我能精确复现同一个“配色方案”去做微调。如果你的开发时间足够，甚至可以做一个小的控制面板，实时调整粒子数、重力、光晕强度，所见即所得，省去一遍遍刷新页面的痛苦。

我还推荐用 Chrome DevTools 的 Rendering 面板把 “FPS Meter” 和 “Paint flashing” 同时打开，前者看整体帧率，后者看每次绘制区域。如果 Paint flashing 显示大面积重绘，多半是你的fillRect清屏用错了坐标系，或者 canvas 尺寸没正确限制。

6. 让气氛更到位：个性化扩展玩法

6.1 音频联动：让烟花跟着音乐节奏炸开

做过一版纯视觉烟花后，我开始琢磨怎么加音乐。在 Web 端做音频联动有个免费好用的工具：Web Audio API。它可以对音频信号做频谱分析，拿到每个频段的能量值。思路是把一首歌的低频能量和一个鼓点检测算法结合起来，低频能量超过阈值时就触发一次爆炸，这样烟花就能跟随音乐节拍炸开。

const audioCtx = new AudioContext(); const analyser = audioCtx.createAnalyser(); analyser.fftSize = 256; const frequencyData = new Uint8Array(analyser.frequencyBinCount); function checkBeat() { analyser.getByteFrequencyData(frequencyData); const bassEnergy = frequencyData.slice(0, 8).reduce((sum, v) => sum + v, 0) / 8; if (bassEnergy > 140) { createFirework( Math.random() * window.innerWidth, window.innerHeight * (0.15 + Math.random() * 0.45) ); } }

这个方案的好处是音频解码、播放、分析全都在浏览器里完成，不用额外引第三方包。注意 AudioContext 必须由用户交互行为触发才能启动，否则会被浏览器拦截，所以页面里要加一个“开启音乐”按钮，点击后再播放音乐并初始化音频链路。我第一次做的时候没注意这个限制，页面加载后自动初始化音频，结果 Safari 上怎么都没反应，排查了半天才发现是自动播放策略在卡脖子。

6.2 文字烟花：把跨年祝福炸到天上去

文字烟花是整屏烟花最出效果的变体。前面粗略提过原理，这里把步骤展开：在内存里创建一个隐藏 canvas，大小和爆炸区域对应；用大号字体写“新年快乐”这样的文字；调用getImageData读取像素数据，把有颜色的像素筛选出来。记录它们相对于文字左上角的位置。

爆炸时，每个粒子先落到文字像素点所在的位置，再向四外飞散。这里有两段路要走：第一段是“聚拢”过程，粒子朝各自目标点加速移动；第二段是“散开”过程，到位后立刻赋予随机速度，形成烟花碎片效果。整体看起来就像文字在空中炸开，视觉冲击力极强。

function loadTextPixels(text) { const offCanvas = document.createElement('canvas'); const offCtx = offCanvas.getContext('2d'); offCanvas.width = 300; offCanvas.height = 100; offCtx.font = 'bold 72px "Microsoft YaHei"'; offCtx.fillStyle = '#fff'; offCtx.fillText(text, 10, 80); const imageData = offCtx.getImageData(0, 0, 300, 100); const points = []; for (let i = 0; i < imageData.data.length; i += 4) { if (imageData.data[i + 3] > 128) { const x = i / 4 % 300; const y = Math.floor(i / 4 / 300); points.push({ x, y }); } } return points; }

文字像素点数量可能非常多，一个 300×100 的区域几百上千个点，全部生成粒子会直接卡死。所以要“抽稀”：每隔几个点取一个，或者随机采样，把单次爆炸的粒子数控制在 200 到 300 之间。这是我试过之后的安全阈值，既可以清晰辨认文字内容，又不至于让帧率崩掉。

6.3 部署与小彩蛋：从本地 HTML 到朋友圈扫码即玩

这个项目最终形态可以简单到“一个 HTML 文件”，所有 CSS 和 JavaScript 都内联在里面。分享时有两个方向：一个是本地直接打开，适合发给少数人；另一个是部署到静态托管平台（比如 GitHub Pages、Vercel、Cloudflare Pages），得到一个链接后生成二维码，别人扫码就能体验。

我建议部署到静态平台，因为 HTML 文件里没有任何后端依赖，整个项目就是零成本托管，还能绑定自定义域名。页面里加一段 metadata 保证移动端缩放正常：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

部署后有几个细节不要忽略：页面标题和分享卡片要设置好，标题可以是“满屏流光炸开，今年过年气氛一秒拉满”；为了兼容微信内置浏览器的分享缩略图，最好再放一个 300×400 的预览图。我做完这步后，把链接发到家族群，长辈用微信点开也能顺畅跑起来，气氛直接到位。

再加一个小彩蛋：如果愿意折腾，可以加一个“倒计时”层，在除夕夜 23：59：59 自动触发连放模式，每秒钟连放十场烟花。配合音乐和文字烟花，效果堪比小型灯光秀。这种“时间驱动 + 视觉反馈”的结合最能让用户感受到页面背后的巧思。

我自己在写这个项目时最大的感受是：烟花模拟器虽然只是个“小玩具”，但它几乎涵盖了前端动画开发的所有关键点——性能、状态管理、随机性设计、跨设备适配、用户交互。它不需要多少代码量，却能把 Canvas 的威力展示得很透彻。做这个页面的过程中，我也逐渐理解了一件事：很多看似简单的效果，真正做好看、做流畅，靠的是背后大量细微的计算和取舍。

如果你也想复刻一个，建议先不要急着加花哨功能，把最基础的一个烟花跑通，再逐步叠加颜色渐变、拖尾、心形爆炸、音频联动。每加一个功能，都回头看看帧率有没有变化，这样学到的东西最多，也最不容易被一堆复杂代码劝退。等最后一版上线，看到家人朋友因为满屏流光发出惊叹时，你会觉得这些调试的夜晚特别值得。