putImageData() 默认会完全覆盖像素，若要实现透明背景火焰效果，必须手动设置 ImageData 的 alpha 通道值（而非固定设为 255），使低强度区域呈现透明而非黑色。
`putimagedata()` 默认会完全覆盖像素，若要实现透明背景火焰效果，必须手动设置 imagedata 的 alpha 通道值（而非固定设为 255），使低强度区域呈现透明而非黑色。
在使用 `putImageData()` 渲染动态效果（如火焰、粒子、热力图等）时，一个常见误区是：误以为通过 `globalCompositeOperation` 或 `globalAlpha` 可以控制图像数据的透明度。实际上，**`putImageData()` 是底层像素级操作，它直接写入 RGBA 值，完全绕过所有绘图上下文的状态设置**——这意味着无论你设置 `ctx.globalAlpha = 0.5` 还是 `ctx.globalCompositeOperation = 'destination-over'`，对 `putImageData()` 的输出均无影响。真正决定每个像素是否透明的，是 ImageData.data 数组中每四个连续字节（R, G, B, A）的第四个值（alpha）。原始代码中这行：
data[++index] = 255; // ❌ 强制全不透明 → 黑色背景被“覆盖”而非“叠加”
导致整个画布被不透明像素填满，即使火焰颜色正确，背景也因 alpha=255 而遮盖了页面底色（默认为黑色或父容器背景），视觉上呈现为黑底火焰。
✅ 正确做法是：将 alpha 值设为与火焰强度 value 一致（范围 0–255）：
data[++index] = value; // ✅ alpha = value → 弱火透明，强火不透明
这样，当 value 为 0（无火）时，alpha=0 → 完全透明，透出 canvas 下方的网页背景；当 value 接近 255 时，alpha=255 → 完全不透明，呈现明亮火焰。整个效果即为自然的“发光火焰叠加在任意背景之上”。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
⚠️ 注意事项：
- Canvas 元素本身需支持透明通道（默认即支持，无需额外设置
canvas.style.background）； - 若页面背景为白色/浅色，建议在 CSS 中显式设置
canvas { background: transparent; }避免渲染器意外填充； -
value必须是整数且在[0, 255]范围内（Math.floor()已保证），否则 alpha 值越界会导致不可预期行为（如截断为 0 或 255）； - 不要重复调用
getImageData()每帧创建新对象（性能开销大），应复用初始化时获取的imageData和data引用（原代码已正确做到）。
完整修复后的核心逻辑片段如下（仅展示关键修改部分）：
for (var y = skipRows; y < canvasHeight; ++y) {
for (var x = 0; x < canvasWidth; ++x) {
var index = y * canvasWidth * 4 + x * 4;
var value = fire[(y - skipRows) * canvasWidth + x]; // 0–255 强度值
data[index] = colors[value][0]; // R
data[++index] = colors[value][1]; // G
data[++index] = colors[value][2]; // B
data[++index] = value; // ✅ Alpha = intensity → 实现渐变透明
}
}
ctx.putImageData(imageData, 0, 0); // 一次性高效写入总结：putImageData() 的透明性完全由 ImageData.data 的 alpha 分量决定。理解这一机制，是实现高质量、可叠加、背景无关的 Canvas 像素动画的关键基础。
