canvas烟花爆炸特效基于粒子系统，通过模拟物理运动（初速度、重力、阻力）、生命衰减（透明度/尺寸/颜色渐变）、多层粒子设计（主爆/拖尾/闪光）及性能优化（活动池管理、边界剔除、禁用抗锯齿）实现真实爆炸效果。
Canvas烟花爆炸特效的核心是粒子系统，关键在于模拟爆炸瞬间的物理运动规律：从中心点向外高速飞散，同时受重力、空气阻力和随机扰动影响，最终减速消失。
基础粒子运动模型
每个粒子用对象表示，包含位置（x, y）、速度（vx, vy）、加速度（ax, ay）、生命周期（life）和尺寸（size）等属性。初始爆炸时，粒子从爆炸中心以随机角度和初速度射出：
- 角度 θ 取 Math.random() * Math.PI * 2
- 初速度 magnitude 建议在 3–10 范围内随机（太小不明显，太大易出画布）
- vx = Math.cos(θ) * magnitude；vy = Math.sin(θ) * magnitude
- 加速度中加入微小重力（如 ay = 0.05）和负向阻力（如 vx *= 0.98; vy *= 0.98）
生命衰减与视觉渐变
粒子不是匀速运动，而是随时间衰减——不仅位置变化，透明度、大小、颜色也需同步变化，增强真实感：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每帧 life--，初始 life 设为 60–120（对应约1–2秒）
- alpha = life / maxLife（控制透明度 ctx.globalAlpha）
- size = baseSize * (life / maxLife)（越老越小）
- 可选：颜色从亮黄/白渐变为橙红再至暗灰，用插值计算 rgb 值
爆炸触发与多层粒子设计
一次“烟花”通常由多个粒子群组成，避免单层显得单薄：
- 主爆炸：50–120个粒子，速度高、寿命中等、偏暖色
- 拖尾粒子：20–40个，速度略低、阻力更小、带轻微延迟生成，模拟余烬飘落
- 闪光粒子：少量（5–10个），极大初速度、极短寿命、高 alpha，模拟爆点瞬光
- 触发时统一记录 timestamp，所有粒子基于同一时间轴更新，避免帧率依赖偏差
性能与优化要点
大量粒子持续更新易卡顿，需主动管理生命周期和内存：
- 粒子数组用 push / splice 管理，但避免每帧遍历全部——可用「活动粒子池」只更新 life > 0 的粒子
- 超出画布边界（如 y > canvas.height + 100）或 life ≤ 0 的粒子立即移除
- 禁用抗锯齿（ctx.imageSmoothingEnabled = false）提升绘制速度
- 使用 requestAnimationFrame 而非 setInterval，保证与屏幕刷新率同步
不复杂但容易忽略：粒子初始速度分布不宜完全均匀，加入高斯随机或分段概率（如更多粒子集中在水平方向±30°）会让爆炸更有方向张力。颜色也不必全用渐变，适当混入少量饱和度突变的粒子，能增强视觉层次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
