无需登录 数据私有 本地保存

Canvas 烟花绽放动效 - 鼠标点击发射烟花

13
0
0
0
✨ 点击夜空发射烟花
常见问题与知识点

烟花效果基于 HTML5 Canvas 和 JavaScript 粒子系统实现。烟花弹从底部发射升空，到达目标位置后爆炸产生大量彩色粒子。每个粒子都模拟了重力加速度、空气阻力和透明度衰减，通过 requestAnimationFrame 实现流畅的60fps动画。Canvas 使用半透明覆盖层技术产生拖尾效果，营造出夜空中烟花绽放的视觉体验。

完全支持移动端使用。工具同时监听了 click 事件和 touchstart 触摸事件，在手机和平板设备上也能流畅体验烟花效果。Canvas 画布高度会根据屏幕尺寸自适应调整，控制面板按钮也会在移动端自动缩小适配，确保良好的操作体验。

画布下方的控制面板提供了多种调节选项：烟花大小（小/中/大）控制爆炸粒子的数量和扩散范围；颜色主题（多彩/暖色/冷色/金色）改变烟花粒子的色相范围。您还可以开启自动烟花模式，让工具随机发射烟花，无需手动点击。

为了保证动画流畅，工具采用了多项性能优化策略：使用 requestAnimationFrame 同步浏览器刷新率；限制同时存在的粒子总数（约2000个上限）；粒子生命周期结束后立即从数组中移除释放内存；对设备像素比（DPR）进行限制（最大2倍），在高分辨率屏幕上平衡画质与性能；自动烟花模式下使用随机间隔避免粒子瞬时爆发。

烟花颜色使用 HSL 色彩空间生成。色相（Hue）在预设主题范围内随机取值（如多彩主题覆盖0-360全色域，暖色主题限定在0-60度范围），饱和度保持80%-100%确保色彩鲜艳，亮度在50%-70%之间。爆炸时粒子初始颜色较亮，随着生命周期衰减亮度和透明度逐渐降低，模拟真实烟花从绽放到消逝的过程。

除了娱乐和视觉欣赏外，这个工具还适合用于：节日庆祝页面的背景动效（如新年、国庆节）；产品发布或活动页的交互元素；前端开发者学习Canvas粒子系统的参考案例；屏幕演示或录屏时的动态背景。您也可以将其作为放松解压的交互小工具使用。
🔧 相关工具