canvas粒子未出现的主因是上下文获取失败或事件未触发，需检查尺寸、pointer-events、遮挡及事件绑定对象；粒子偏移需校正transform影响；性能卡顿源于未清理死亡粒子和全量清屏，应改用半透明覆盖并控制生命周期。
点击按钮时Canvas粒子没出现？检查事件绑定和渲染上下文
粒子不出现，大概率是 canvas 没获取到正确上下文，或点击事件没真正触发到目标元素。常见情况是按钮用了 pointer-events: none、被父层遮挡，或者 Canvas 画布尺寸为 0。
实操建议：
- 用
console.log(canvas.width, canvas.height)确认 Canvas 尺寸非零；若为 0，需手动设置canvas.width = canvas.offsetWidth和canvas.height = canvas.offsetHeight - 确保绑定事件的是按钮本身，而非其内部文字或图标——推荐用
button.addEventListener('click', handler)，避免委托到父容器后坐标错乱 - 粒子动画依赖
requestAnimationFrame，但首次调用前必须先初始化粒子数组，否则循环里读取空数组，啥也不画
粒子从按钮中心飞出但轨迹歪斜？修正坐标系与 transform 冲突
按钮若设置了 transform: scale(1.2) 或 rotate()，用 getBoundingClientRect() 获取的位置仍是原始布局位置，直接作为粒子起点会导致偏移。
实操建议：
- 用
button.getClientRects()[0]取第一个矩形，再结合window.scrollX/Y计算绝对屏幕坐标 - 如果按钮有 CSS transform，用
button.style.transform解析缩放/旋转值并补偿——更稳妥的做法是：把 Canvas 叠在按钮正上方（position: absolute），宽高与按钮一致，并设pointer-events: none，这样粒子坐标可直接基于按钮 clientRect 计算 - 粒子初始速度别全设成
{x: Math.random() - 0.5, y: Math.random() - 0.5}，要乘上一个基础速率（如* 3），否则飞太慢，像在飘
粒子数量一多就卡顿？控制帧率和生命周期
每点一次就生成 100 个粒子，连续点 5 下就是 500 个活跃对象，每个还带透明度衰减和位置更新，CPU 负载直线上升。
实操建议：
- 给每个粒子加
life和lifeMax字段，每次update()中particle.life--，life 就从数组中 <code>splice掉（别用filter，它新建数组） - 限制最大并发粒子数，比如全局维护一个
particles数组，每次爆炸前先while (particles.length > 200) particles.pop() - Canvas 清屏别用
ctx.clearRect(0, 0, w, h)全刷——改用半透明覆盖：ctx.fillStyle = 'rgba(255,255,255,0.1)'; ctx.fillRect(0, 0, w, h)，视觉上清旧帧，性能更好
Chrome 正常，Safari 粒子不动？注意 requestAnimationFrame 兼容写法
Safari 对未激活 tab 的 requestAnimationFrame 会降频甚至暂停，且某些老版本不支持 canvas.getContext('2d') 返回的 ctx 上的 globalAlpha 动态设置。
实操建议：
- 不要依赖
ctx.globalAlpha = particle.alpha做渐隐——改用ctx.fillStyle = `rgba(${r},${g},${b},${particle.alpha})`，兼容性更稳 - 动画主循环加兜底：用
setTimeout(() => animate(), 1000 / 60)当requestAnimationFrame不可用时降级 - Safari 下若按钮
:active状态消失太快，导致点击事件延迟触发，可加touchstart事件提前捕获（移动端优先场景）
粒子系统看着热闹，真正难的是让每一次爆炸都“刚好”——不卡、不偏、不漏、不糊。最常被跳过的，是清理已死亡粒子这一步；很多人只顾生成，忘了删，内存悄悄涨，三分钟后点不动了才回头找问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
