HTML5游戏粒子特效核心在于时机选择、生命周期管控与帧率保障；优先用PixiJS的ParticleContainer和pixi-particles库，避免手写Canvas导致的性能问题，GPU方案需手动启用混合与合理排序。
HTML5 游戏中加特效，核心不是“堆粒子”，而是选对时机、控好生命周期、避免掉帧。直接用 Canvas 手写粒子系统容易失控，优先用成熟方案；真要自研，得从 requestAnimationFrame 节奏和对象复用起步。
用 PixiJS 快速挂载粒子特效
PixiJS 的 PIXI.particles.ParticleContainer 和配套的 pixi-particles 库是当前最稳的组合，比原生 Canvas 管理千级粒子更省心。
- 必须用
ParticleContainer替代普通Container，否则每帧重绘开销爆炸 - 粒子纹理建议预加载为
Texture，别在发射时实时Texture.from(image) - 配置里设
maxParticles: 500是安全起点，超了容易卡——尤其低端安卓 WebView - 示例：加载完资源后，用
new PIXI.particles.Emitter(container, textures, config)启动，emitter.emit = true开火
Canvas 2D 手写粒子时必防的三个坑
不用框架时，CanvasRenderingContext2D 的状态切换和频繁 clearRect 是性能杀手。
- 别每帧
ctx.clearRect(0, 0, width, height)：改用ctx.globalCompositeOperation = 'destination-out'+ 半透明矩形擦除，保留残影更省 - 粒子对象别 new 每次都造：建个
pool = []，spawn()时pool.pop() || new Particle()，die()时pool.push(this) - 坐标更新别用
Math.sin(Date.now() * 0.001)：统一用一个deltaTime变量驱动，否则不同设备节奏错乱
WebGL 粒子着色器里 alpha 混合失效？
用 Three.js 或自定义 Shader 写 GPU 粒子时，gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) 必须手动开启，WebGL 默认不启用混合。
立即学习“前端免费学习笔记（深入）”；
- 漏调
renderer.setClearColor(0x000000, 0)（第二个参数是 alpha）会导致背景清空覆盖粒子透明度 - 粒子排序很关键：开启
depthWrite: false，但若需前后遮挡，得按 Z 值手动排序并逆序渲染（远→近） - Shader 中别直接写
gl_FragColor.a = 0.3：应由顶点传入vAlpha插值，否则边缘硬边明显
真正难的不是让粒子飞起来，是让它们在 60fps 下稳定飞、内存不涨、切后台再回来不崩——所有方案的第一步，都是把发射器和粒子池的销毁逻辑写进 onDestroy 或 visibilitychange 监听里。
