HTML5 Canvas火焰特效本质是手动控制粒子位置、大小、颜色和透明度的2D粒子系统，通过lighter叠加、分层绘制、鼠标扰动和动态色阶提升真实感，适合100–150粒子内高性能运行。
用 HTML5 Canvas 制作火焰燃烧的动态粒子特效，本质是构建一个轻量、可控的 2D 粒子系统，不是加滤镜，也不是调 API —— 它靠手动控制每个粒子的位置、大小、颜色和透明度，并逐帧更新渲染。
核心思路：粒子即“火苗”
火焰在视觉上由大量向上飘动、明暗变化、边缘柔和的小光点组成。Canvas 里没法直接“贴火焰贴图”，只能用圆形或矩形粒子模拟：
- 每个粒子代表一簇微小火苗，有初始位置（通常从底部中心发射）、随机初速度（主要向上，略带左右晃动）
- 每帧受“虚拟重力”轻微下拉（实际是减速上升），同时透明度递减、尺寸缩小，模拟燃尽消散
- 颜色从底部的亮黄/橙（rgba(255,200,50,1)）渐变到顶部的暗红/黑（rgba(180,30,10,0.2)）
- 必须用
globalCompositeOperation = "lighter"叠加绘制，才能让多层粒子自然融合出光晕感，避免生硬边缘
关键代码结构（精简可运行版）
以下是最小可行逻辑，不依赖任何库：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 初始化画布并获取
ctx，设好宽高和devicePixelRatio缩放适配（防模糊） - 定义粒子类：
x/y、size（1–6px）、speedY（-3 到 -6）、alpha（起始 0.8–1）、hue（15–40，控制偏黄/橙） - 每帧执行：
ctx.clearRect()→ 更新所有粒子（y += speedY；speedY += 0.05；alpha -= 0.008；size *= 0.98）→ 绘制（ctx.fillStyle = `hsla(${hue}, 100%, 60%, ${alpha})`） - 粒子消失后，从火焰根部（如
canvas.width/2, canvas.height-20）重新生成，保持数量稳定
提升真实感的三个细节
纯粒子动画容易显得单薄，加这几个调整立刻不一样：
立即学习“前端免费学习笔记（深入）”；
- 分层绘制：底层用大而慢的粒子（模拟主火舌），中层用中等粒子（主体燃烧），顶层用小而快的粒子（火星飞溅），分别管理数组、不同衰减率
-
鼠标扰动：监听
mousemove，计算距离火焰中心的偏移量，给附近粒子加横向速度扰动（speedX = (mouseX - centerX) * 0.02），火会“被风吹动” -
动态色阶：不用固定
hsl，而是按粒子y坐标映射：越靠近底部hue=30, lightness=70%，越往上hue=10, lightness=20%，再配合 alpha 衰减，自然形成焰心到焰尾的过渡
性能与替代建议
Canvas 2D 粒子方案适合 100–150 粒子以内，60fps 稳定。若要更多粒子、光影、交互或移动端流畅，别硬扛：
- 超过 200 粒子时，明显掉帧，尤其低端安卓机 —— 此时应考虑 WebGL 方案（如 Three.js + 自定义 ShaderMaterial）
- 已有成熟封装可省力：
@pixi/filter-fire（需 PixiJS v7+）能快速接入，但定制性弱；不推荐 npm 上那些“一行加火焰”的黑盒包，多数只是套壳粒子循环 - 真正需要电影级效果（如液态火焰、热浪扭曲），得用 WebGL 纹理动画 + 噪声函数，Canvas 2D 无法胜任
