Canvas粒子爆炸效果核心是用requestAnimationFrame持续绘制带物理属性的小圆点：1.初始化时创建50–200个粒子，设初始位置、随机极坐标速度、alpha和scale；2.每帧更新位置、衰减alpha与scale，可加重力或阻力；3.绘制时用save/restore控制globalAlpha和fillStyle；4.事件驱动触发并用filter清理或对象池复用。
Canvas 粒子爆炸效果的核心是：用 requestAnimationFrame 持续绘制大量带物理属性（位置、速度、加速度、透明度、缩放）的小圆点，让它们从爆炸中心向外飞散并逐渐消失。
1. 初始化粒子系统
爆炸发生时，创建一批粒子对象，每个包含初始位置（通常是鼠标点击或目标中心）、随机方向的速度、衰减的透明度和尺寸。
- 粒子数量建议控制在 50–200 个之间，太多会影响性能
- 用极坐标生成初速度：先随机角度
θ，再乘以基础速率得到vx和vy - 给每个粒子设置初始
alpha（如 1.0）和scale（如 1.0），后续逐帧递减
2. 更新粒子状态
每一帧更新粒子的位置、透明度、大小，并判断是否该销毁（比如 alpha ≤ 0 或超出画布边界）。
- 位置更新：
x += vx; y += vy; - 透明度衰减：
alpha -= 0.01;（可配合时间或帧数做非线性衰减） - 尺寸缩小：
scale *= 0.98;（模拟扩散消散感） - 可加入轻微重力或阻力：
vy += 0.1;或vx *= 0.99; vy *= 0.99;
3. 绘制粒子
使用 ctx.beginPath() + ctx.arc() 绘制每个粒子，注意设置 globalAlpha 和 fillStyle。
立即学习“Java免费学习笔记（深入）”；
- 先保存上下文状态：
ctx.save(); - 设置透明度：
ctx.globalAlpha = particle.alpha; - 设置颜色（可随生命周期变化）：
ctx.fillStyle = `hsl(${particle.hue}, 100%, 60%)`; - 绘制圆点：
ctx.arc(particle.x, particle.y, 2 * particle.scale, 0, Math.PI * 2); - 最后恢复：
ctx.restore();
4. 触发与清理
爆炸不是持续动画，而是事件驱动的一次性效果。需管理粒子生命周期，避免内存泄漏。
- 用数组存储活跃粒子，每帧过滤掉已结束的：
particles = particles.filter(p => p.alpha > 0); - 绑定点击事件触发爆炸：
canvas.addEventListener('click', explodeAt) - 若频繁爆炸，建议复用粒子对象（对象池），而非反复 new
