canvas粒子爆炸效果的核心是用requestanimationframe持续更新，粒子从中心向外加速飞散并渐变透明度、大小与颜色后消失；需初始化画布与粒子对象（含位置、速度、半径、alpha、life），每帧更新位置/速度/生命值，优化渲染与性能，并添加色彩层次和残影增强视觉效果。
Canvas 粒子爆炸效果的核心是：用 requestAnimationFrame 持续更新每一帧，让大量粒子从爆炸中心向外加速飞散，同时控制其透明度、大小和颜色渐变，最后自然消失。
初始化画布与基础粒子结构
先获取 Canvas 上下文，设置全屏或固定尺寸；每个粒子用对象表示，至少包含位置（x/y）、速度（vx/vy）、半径、透明度（alpha）和生命周期（life）。例如：
- 粒子初始位置设为爆炸中心点（比如鼠标点击处）
- 速度用随机角度 + 随机初速度生成：
vx = Math.cos(angle) * speed，vy = Math.sin(angle) * speed - 生命值从 1 开始，每帧递减（如
life -= 0.02），归零后移除
粒子运动与衰减逻辑
每帧更新时，对每个活跃粒子执行：
- 位置更新：
x += vx; y += vy; - 速度衰减（模拟阻力）：
vx *= 0.97; vy *= 0.97; - 透明度和半径随生命值线性变化：
alpha = life; radius = life * 3; - 可加入轻微重力或随机扰动增强真实感（如
vy += 0.1或vx += (Math.random() - 0.5) * 0.2）
渲染与性能优化
用 ctx.beginPath() + ctx.arc() 绘制每个粒子，注意开启抗锯齿（ctx.imageSmoothingEnabled = false 可选）；关键优化点：
- 限制最大粒子数（如 200–500 个），超出则淘汰最老的粒子
- 使用
ctx.globalAlpha统一设置透明度，比单个粒子设 alpha 更快 - 避免频繁创建/销毁数组，用对象池复用粒子对象
- 爆炸触发时批量生成粒子，而非逐帧添加
添加色彩与视觉层次
让爆炸更炫酷，可以：
- 按生命周期插值颜色：起始用亮黄/橙（
hsl(40, 100%, 60%)），结束用暗红/灰（hsl(0, 50%, 30%)） - 叠加多层粒子：外圈小而快的粒子 + 内圈大而慢的“碎片”
- 加轻微缩放或旋转（对圆形粒子不明显，但可用于带纹理的 sprite）
- 爆炸后留短暂残影：用半透明黑色矩形覆盖全画布（
ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(...)）
不复杂但容易忽略的是：粒子生命周期必须严格控制，否则内存泄漏或卡顿；动画节奏靠速度衰减和 alpha 衰减共同决定，调参比写代码花时间更多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
