HTML5 Canvas 本身不支持火焰滤镜，需用WebGL（如Three.js+ShaderMaterial）或PixiJS等库实现；Canvas 2D仅能低效模拟粒子效果，且无真实光影层次。
HTML5 Canvas 本身不支持火焰滤镜，得用 WebGL 或第三方库
原生 HTML5 没有内置的“火焰滤镜”API，ctx.filter 只支持 CSS filter 子集（如 blur()、grayscale()），且浏览器兼容性差、无法实现动态火焰效果。真要模拟火焰，必须绕过 2D context，转向 WebGL 渲染或使用成熟视觉库。
Three.js + ShaderMaterial 是最稳妥的火焰实现方式
Three.js 封装了 WebGL，配合自定义 fragment shader 能实时生成流动、发光、扰动的火焰纹理。关键不是“加滤镜”，而是把火焰当作一个带透明度和动态噪声的材质贴在几何体上。
- 用
THREE.PlaneGeometry创建一个面片作为火焰载体 - 编写 GLSL fragment shader：采样多层
noise（如柏林噪声）控制亮度、颜色偏移和上升扰动 - 在 shader 中混合红/橙/黄/透明色，并用
time统一驱动动画节奏 - 材质必须启用
transparent: true和depthWrite: false，否则火焰会遮挡后方物体
示例片段（shader 内关键逻辑）：
vec2 uv = vUv + vec2(0.0, time * 0.5);
float flame = snoise(uv * 4.0) * 0.5 + snoise(uv * 8.0) * 0.3;
gl_FragColor = vec4(vec3(flame * 0.8, flame * 0.4, 0.0), flame * 0.7);
Canvas 2D 模拟火焰只能靠逐帧粒子+alpha 混合，性能差且假
如果硬要用纯 Canvas 2D，只能手动绘制大量半透明粒子（小圆/矩形），每帧按物理规则向上飘、缩放、变色、衰减透明度。这不是滤镜，是粒子系统模拟 —— 但 60fps 下超过 200 粒子就会明显掉帧，且边缘发虚、无光影层次。
立即学习“前端免费学习笔记（深入）”；
- 每次
clearRect()后必须用globalCompositeOperation = "lighter"叠加光晕感 -
fillStyle得用rgba(r, g, b, alpha)动态插值，不能只靠shadowBlur - 没有 GPU 加速，
requestAnimationFrame在低端设备易卡顿 - 无法响应鼠标/触摸交互做火焰扰动（比如手划过时火势变化）
别碰那些号称“一行代码加火焰滤镜”的 npm 包
搜索 html5-fire-filter 或类似包，多数只是封装了简陋的 Canvas 粒子循环，或者把 Three.js 示例打包成黑盒 API，参数少、不可定制、不维护。真正可控的方案只有两种：
- 自己写 Three.js + ShaderMaterial（推荐从 three.js 官方 shader 示例 改起）
- 用
@pixi/filter-fire（PixiJS 生态），但它依赖 Pixi v7+，且仍需手动配置FireFilter的intensity、speed、scale等参数，不是开箱即用
火焰效果的真实感，90% 取决于噪声函数质量、颜色映射曲线和时间步长精度，不是加个 class 或调个 filter 就能出来的。
