网页烟花特效代码教程

什么是HTML5 Canvas烟花特效？

HTML5 Canvas烟花特效是利用浏览器的Canvas API绘制粒子动画，模拟真实烟花爆炸效果。它纯前端实现，不需要服务器，可以直接嵌入任何网页。

烟花效果实现原理

烟花效果的核心是粒子系统：

1. 发射阶段：一个光点从底部向上运动
2. 爆炸阶段：到达顶点后分裂成多个粒子
3. 扩散阶段：粒子向四周扩散，受重力影响下落
4. 消散阶段：粒子透明度逐渐降低直至消失

核心代码逻辑

烟花效果的关键参数：

• 粒子数量：每次爆炸产生的粒子数（20-150）
• 扩散速度：粒子初始速度（影响爆炸半径）
• 重力加速度：影响粒子下落速度（通常0.02-0.05）
• 生命周期：粒子衰减速率（控制烟花持续时间）
• 颜色：随机或预定义的颜色数组

烟花特效应用场景

• 表白网页：浪漫烟花配合文字，制作个性化表白页面
• 节日祝福：新年、国庆、圣诞等节日的祝福页面
• 生日贺卡：在线生日贺卡添加烟花效果
• 产品发布：新产品上线庆祝页面
• 互动游戏：简单的烟花互动小游戏

性能优化建议

1. 使用对象池复用粒子，减少GC压力
2. 设置最大粒子数量上限（建议不超过5000）
3. 使用离屏Canvas进行双缓冲
4. 移动端减少粒子数量和密度
5. 使用requestAnimationFrame保持60fps

常见问题

如何添加文字到烟花页面？

在Canvas上绘制文字：使用ctx.fillText()方法在指定位置绘制祝福文字，配合颜色和阴影效果即可。也可以使用HTML元素覆盖在Canvas上方，更灵活地控制样式。

如何让烟花跟随鼠标点击？

监听canvas的click事件，获取点击坐标(e.clientX, e.clientY)，在该位置触发烟花爆炸。注意Canvas尺寸和CSS显示尺寸的比例换算。