粒子效果需用canvas+requestanimationframe实现，按钮仅触发emitparticles(x,y)，每帧重绘并更新粒子位置/速度/透明度/缩放，初速度用极坐标随机方向，生命周期按帧数衰减，移动端须用touchstart防误触并准确获取坐标。
点击按钮触发粒子发射，核心靠 canvas + requestAnimationFrame
直接用 DOM 元素做粒子会卡顿，必须用 canvas 渲染。粒子不是“动画”，而是每帧重绘：记录每个粒子的位置/速度/透明度，requestAnimationFrame 循环更新并清空重画。按钮只负责「发令」——调用一次初始化函数，生成一批粒子对象。
常见错误是把粒子逻辑写在 onclick 里反复新建 canvas 或绑定重复监听；正确做法是：canvas 只初始化一次，按钮仅调用 emitParticles(x, y)，传入点击坐标作为粒子原点。
- canvas 宽高建议设为全屏或容器尺寸，用
canvas.width = container.clientWidth动态适配 - 粒子数量别超过 200，否则低端机掉帧；可设上限并随机丢弃部分旧粒子
- 避免在粒子循环里调用
getBoundingClientRect()或读取 DOM 尺寸，提前缓存
粒子从点击点向四周扩散，关键在初始速度的随机方向
不是简单给 x/y 加减固定值，得用极坐标转直角坐标：先随机角度 Math.random() * Math.PI * 2，再按该方向赋予初速度（比如 speed * Math.cos(angle) 和 speed * Math.sin(angle)）。这样才是真·四散，而非只朝四个方向飞。
如果粒子都往右上飞，大概率是角度范围写成了 0 ~ Math.PI/2；如果成直线发射，可能是忘了乘 cos/sin，直接用了角度本身当速度分量。
- 初速度建议 2~8 px/frame，太大飞出屏幕太快，太小看不出扩散感
- 加一点随机偏移：
vx += (Math.random() - 0.5) * 0.5让轨迹更自然 - 粒子生命周期用
life: 60（帧数）比用时间更稳定，避免帧率波动影响消散节奏
粒子淡出+缩放消失，靠透明度和 scale 联动衰减
单纯改 globalAlpha 会让所有粒子一起变淡，失去层次感。正确做法是每个粒子维护独立的 alpha 和 scale，随生命周期线性或缓动衰减：
particle.alpha = life / maxLife; particle.scale = life / maxLife;
注意：canvas 的 globalAlpha 是全局设置，每次绘制前要重置；更稳妥的做法是用粒子自身的 alpha 乘到 fillStyle 的 rgba 值里，比如 ctx.fillStyle = `rgba(255, 100, 150, ${p.alpha})`。
- 别用
ctx.globalAlpha = p.alpha后直接 draw，否则后续其他绘制（比如文字）也会变淡 - scale 缩放用
ctx.scale(p.scale, p.scale)会影响坐标系，推荐直接算半径：radius * p.scale - alpha 降到 0.05 以下就跳过绘制，省性能
移动端点击位置不准？必须处理 touchstart 并阻止默认行为
手机上 click 事件有 300ms 延迟，且坐标常取错。要用 touchstart，并立刻获取 touches[0] 的 clientX/clientY，同时加 e.preventDefault() 防止页面滚动干扰。
桌面端和移动端坐标逻辑不同：PC 用 e.clientX/e.clientY，移动端必须用 e.touches[0].clientX。混用会导致 H5 页面在 iPhone 上粒子总从左上角炸开。
- 统一用
const x = e.touches?.[0]?.clientX || e.clientX兜底 - canvas 坐标需减去 canvas 的 offsetTop/Left，用
canvas.getBoundingClientRect()获取准确偏移 - 别在
touchstart里直接 emit，等touchend更稳妥，避免滑动误触
实际最难的是让粒子「看起来有重量感」——这不靠算法，靠衰减曲线微调：alpha 用 easeOutQuad（t * t），scale 用线性，速度衰减略慢于透明度。这些细节没标准答案，但调错一帧，整个效果就塑料感十足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
