3个坑教你手写实现火焰视频核心算法

版本升级后 API 全变了，之前封装好的粒子系统直接报错，看着满屏的 undefined，你是不是也崩溃过？别急着换库，花半小时手写实现底层渲染逻辑，你会发现所谓的“火焰视频”特效，核心不过是一套基于噪声的像素计算。很多开发者被封装库的黑盒吓住，其实拆开看，也就是几十行代码的事。

入口定位：别被特效名称骗了

做市政公用工程的朋友可能觉得“火焰视频”离自己很远，但这其实是前端可视化与多媒体处理的典型场景。比如工地进度大屏、环境监测数据的热力图展示，甚至只是给视频加个燃烧的转场特效，底层逻辑是一致的。

很多团队在集成第三方特效库时，往往只关注 init 和 render 接口，却忽略了底层的 Canvas 操作。当库版本从 v2 升级到 v3，坐标系统从 CSS 像素变成设备像素比（DPR），或者渲染上下文从 2D 切换到 WebGL 时，原本正常的代码瞬间失效。这时候，如果你不懂底层，就只能看着报错干瞪眼。

所谓“火焰视频”，在技术实现上通常分为两种路径：一种是基于帧序列的视频解码（MP4/H.264），另一种是基于实时计算的粒子或像素噪声模拟。这里我们聚焦后者，因为它更能体现“手写实现”的价值，且对性能优化有直接指导意义。

核心痛点在于： 大多数教程只教你调用 API，不教你为什么这么写。当 API 变动时，你连修改的方向都找不到。

核心片段：噪声是灵魂

火焰的本质是湍流，而湍流在计算机图形学中通常用 Perlin 噪声或 Simplex 噪声来模拟。以下是一个基于 Canvas 2D 的简化版火焰核心计算片段。注意，这不是完整的工程代码，而是剥离了所有依赖后的手写实现核心。

// 核心逻辑：基于时间变化的噪声值驱动像素亮度
// 注意：此处为了性能，使用了简化的正弦波叠加模拟噪声，而非完整的 Perlin 实现
function getNoiseValue(x, y, time) {// 1. 坐标归一化，确保噪声场在屏幕内平滑过渡const nx = x / 100.0;const ny = y / 100.0;// 2. 多层频率叠加，模拟火焰的层次感// 低频决定火焰的大致形状，高频决定边缘的破碎感let noise = 0;noise += Math.sin(nx * 3.0 + time * 2.0) * 0.5; // 基础波动noise += Math.sin(ny * 5.0 + time * 3.0) * 0.3; // 垂直扰动noise += Math.sin((nx + ny) * 2.0 + time * 4.0) * 0.2; // 对角线扰动// 3. 标准化到 0-1 范围，便于后续映射颜色return (noise + 1.0) / 2.0;
}// 渲染主循环
function renderFrame(ctx, width, height, time) {const imageData = ctx.createImageData(width, height);const data = imageData.data;// 遍历每个像素，计算其“热度”for (let y = 0; y < height; y++) {for (let x = 0; x < width; x++) {const idx = (y * width + x) * 4;// 调用噪声函数获取当前像素的强度const intensity = getNoiseValue(x, y, time);// 4. 颜色映射：火焰通常是 黑->红->橙->黄->白// 这里简化为：强度越高，RGB 越接近白色，中间态偏红const r = Math.min(255, intensity * 255 * 1.2);const g = Math.min(255, Math.max(0, (intensity - 0.3) * 255));const b = Math.min(255, Math.max(0, (intensity - 0.6) * 255));data[idx] = r;       // Reddata[idx + 1] = g;   // Greendata[idx + 2] = b;   // Bluedata[idx + 3] = 255; // Alpha (完全不透明)}}// 5. 将计算好的像素数据写回画布ctx.putImageData(imageData, 0, 0);
}

逐行拆解：

getNoiseValue 函数：这是整个效果的灵魂。传统的 Perlin 噪声计算复杂，涉及大量向量点积。在 Web 端，如果不需要极致的物理真实性，用正弦波叠加（Sine Wave Superposition）可以近似模拟出类似的湍流感，且计算速度快几个数量级。time 参数传入当前时间戳，使得噪声场随时间流动，形成“动”的效果。
data[idx] 操作：Canvas 的 ImageData 是一个 Uint8ClampedArray，每 4 个字节代表一个像素（RGBA）。直接操作这个数组比用 fillRect 一个个画小方块要快得多，因为后者涉及大量状态切换和路径构建。
颜色映射逻辑：注意 g 和 b 的阈值。火焰不是均匀变色的，而是有特定的温度梯度。红色出现早，黄色和白色只在核心高温区出现。如果这里写错，出来的就是“彩虹汤”而不是“火”。

设计思想：为什么这么写？

你可能会问，为什么不直接用 WebGL 的 Shader？

答案在于兼容性与调试成本。

对于市政公用工程中的中小型可视化项目，Canvas 2D 的兼容性更好，且调试简单。WebGL 虽然快，但一旦出错，调试难度指数级上升。Canvas 2D 的 ImageData 操作虽然看似笨重，但在分辨率可控（例如 512x512）的情况下，性能完全够用。

关键设计原则：

解耦计算与渲染：getNoiseValue 是纯数学函数，不依赖 Canvas API。这意味着你可以把它单独抽出来做单元测试，甚至可以迁移到 Web Worker 中并行计算，而不影响主线程渲染。
空间换时间：上面的代码是逐像素计算，复杂度是 O(N*M)。如果性能不足，可以引入“低分辨率渲染 + 放大”策略。先在 128x128 的离屏 Canvas 上计算，再放大绘制到主 Canvas。视觉上几乎无差别，但计算量降低了 16 倍。
时间驱动而非帧驱动：代码中 time 是连续变量，而不是 frameCount。这保证了即使帧率波动（掉帧），火焰的流动速度依然是恒定的，不会出现“卡顿”或“加速”的感觉。这是许多新手忽略的细节。

RFC 规范视角的补充：

在处理视频数据时，如果涉及 MP4 编码，需参考 ISO/IEC 14496-14 (MP4) 规范中的时间戳定义。特别是 cts (Composition Time Offset) 字段，它决定了视频帧的显示顺序与编码顺序的关系。在处理“火焰视频”这类特效叠加时，如果底层视频解码时间戳错乱，特效会出现抖动。虽然本文主要讲 Canvas，但理解底层视频流的时间戳机制，对于做混合渲染至关重要。

手写简化版：从 0 到 1

为了让你能直接跑起来，这里提供一个极简的 HTML 结构。

<!DOCTYPE html>
<html>
<head><style>canvas { border: 1px solid #000; image-rendering: pixelated; }</style>
</head>
<body><canvas id="fire" width="256" height="256"></canvas><script>const canvas = document.getElementById('fire');const ctx = canvas.getContext('2d');let time = 0;// 简化的噪声函数，同上文function getNoise(x, y, t) {const nx = x / 50.0, ny = y / 50.0;return (Math.sin(nx*2+t*2)*0.5 + Math.sin(ny*3+t*3)*0.3 + 1) / 2;}function loop() {time += 0.01;const img = ctx.createImageData(256, 256);const d = img.data;for(let y=0; y<256; y++) {for(let x=0; x<256; x++) {const i = (y*256+x)*4;const n = getNoise(x, y, time);// 颜色映射d[i] = n*255;       // Rd[i+1] = Math.max(0, (n-0.4)*255); // Gd[i+2] = Math.max(0, (n-0.7)*255); // Bd[i+3] = 255;       // A}}ctx.putImageData(img, 0, 0);requestAnimationFrame(loop);}loop();</script>
</body>
</html>

避坑指南：

DPR 问题：在 Retina 屏上，Canvas 默认 1:1 映射 CSS 像素，导致模糊。如果追求清晰，需将 Canvas 尺寸设为 window.devicePixelRatio 倍，并缩放上下文。但对于火焰这种模糊特效，通常不需要，反而可以节省性能。
内存泄漏：如果频繁创建 ImageData，在低端机上可能导致 GC 停顿。建议复用 ImageData 对象，只更新 data 数组的内容。
透明度叠加：如果要在视频上叠加火焰，记得设置 globalCompositeOperation = 'lighter' 或 'screen'，这样火焰的高光部分会与视频内容自然混合，而不是简单地覆盖。