点击画布放烟花
这是一个在浏览器里跑的烟花特效代码生成器，你调好颜色、粒子数、爆炸半径这些参数，它直接吐出可以粘贴进网页的 HTML+Canvas 代码。解决的问题是：想给页面加一段烟花动画，但自己写 Canvas 粒子系统太费时间，找现成代码又改不动参数。典型场景：给女朋友做一个生日祝福页，背景是深蓝夜空，烟花颜色设成 #ff4d6d 和 #ffd166 两色交替，爆炸半径 120px，粒子数 80，速度 3.5，生成代码后存成 birthday.html，双击就能在浏览器里看效果，不用装任何环境。
| 对比维度 | 本工具 | 手工/替代做法 |
|---|---|---|
| 上手时间 | 调 4 个参数约 30 秒，复制即用 | 从零写 Canvas 粒子系统约 2 到 4 小时 |
| 代码体积 | 默认约 4.2KB，无外部依赖 | 引入 particles.js 约 120KB，或自己写 200 行以上 |
| 参数调整 | 滑块实时预览，改完立刻看到效果 | 改代码后刷新页面，每次约 5 到 10 秒 |
| 移动端适配 | 自动按 devicePixelRatio 缩放画布 | 需手动处理 dpr，否则高分屏模糊 |
| 颜色循环 | 支持 2 到 6 色按顺序循环 | 需自己写数组索引和取模逻辑 |
手机端建议单次爆炸粒子数不超过 80，同时存在的烟花不超过 5 个，总粒子数控制在 400 以内。桌面端可以放到 150 粒子、8 个烟花，约 1200 粒子。超过 2000 个粒子在 60fps 下每帧要算 2000 次位置更新，中低端手机会掉到 30fps 以下。
支持 #RRGGBB 六位十六进制、#RGB 三位简写，以及 rgb(255,77,109) 这种函数写法。不支持带透明度的 rgba，因为粒子透明度由代码里的生命周期自动控制，从 1 线性衰减到 0。最多建议加 6 个颜色，超过 6 个循环一轮要等太久，视觉上反而乱。
默认参数下生成的 HTML 约 4.2KB，其中 Canvas 绘制逻辑约 120 行、3.1KB，样式和结构约 1.1KB。如果把粒子数从 80 降到 40，代码体积不变，因为粒子数是运行时变量。代码里没有引用任何外部库，不依赖 jQuery 或 particles.js。
重力默认 0.05，表示每帧给粒子的垂直速度加 0.05px。设成 0 粒子会一直往上飘不落下来；设成 0.2 会像铁砂一样快速下坠。想要“绽放后缓慢飘落”的效果，建议 0.03 到 0.08 之间。这个值和速度要配合：速度 3.5 配重力 0.05，粒子大约 1.4 秒后落回爆炸原点高度。
可以，生成的代码用 Canvas 2D 绘制，兼容 iOS Safari 10+ 和 Android Chrome 60+。但要注意两点：一是页面要加 viewport meta 标签，否则 canvas 宽度会按 980px 渲染；二是移动端 devicePixelRatio 通常是 2 或 3，代码里已经按 dpr 缩放画布，所以 120px 半径在手机上实际占 240 到 360 个物理像素。
所有计算和代码生成都在你的浏览器里完成，参数不会上传到服务器。生成的代码是纯前端 Canvas 2D 实现，不依赖任何后端接口。粒子运动用简单的欧拉积分，不是物理引擎，所以爆炸形状是均匀球形而非真实烟花的不规则散射。颜色循环按数组顺序，不支持随机取色。