本文详解 canvas 中逐帧播放 png 动画时出现卡顿、闪屏的根本原因，并提供基于预加载 + 图像缓存的高性能解决方案，彻底规避 `img.src` 动态赋值引发的竞态问题。
在使用 Canvas 实现滚动驱动的逐帧动画（如产品展示中的透明 PNG 序列）时，开发者常遇到「画面短暂消失」「跳帧」「闪烁」等视觉抖动问题。表面看是性能不足导致渲染滞后，但真实瓶颈往往并非 clearRect 或 drawImage 本身，而是图像资源加载的异步不确定性——原代码中反复修改 img.src 并立即调用 drawImage，极易触发未完成加载的空图像绘制，造成数毫秒的透明空白帧。
✅ 核心问题：img.src 动态赋值引发竞态
原始逻辑中：
img.src = currentFrame(index); // 异步开始加载 context.drawImage(img, 0, 0); // 此时 img 可能尚未 onload，宽高为 0 → 绘制失败/空白
浏览器不会等待图片加载完成就执行绘图，导致 drawImage 绘制一个“空”或“未就绪”的 <img> 对象，Canvas 即刻变透明。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
✅ 正确解法：预加载全部帧并缓存为就绪图像对象
必须确保每一帧图像在首次使用前已完全加载完毕。推荐采用 Promise.all() 并行预加载所有 PNG，并将每个 Image 实例（含 onload 后的完整像素数据）存入数组：
const frameCount = 120;
const imageUrls = Array.from({ length: frameCount }, (_, i) =>
`https://www.dr-adler.com/content/produkte/Sheabutter/renderAnimation/${(i + 1).toString().padStart(3, '0')}.png`
);
// 封装单图加载为 Promise
const preloadImage = (src) => {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => console.warn(`Failed to load frame: ${src}`);
img.src = src;
});
};
// 并行预加载全部帧，返回就绪 Image 实例数组
const preloadImages = () => Promise.all(imageUrls.map(preloadImage));✅ 渲染逻辑：纯同步绘制，零加载延迟
预加载完成后，滚动监听器直接从缓存数组中取已就绪图像绘制，无需任何异步等待：
let images = [];
const init = async () => {
images = await preloadImages();
console.log('✅ All frames preloaded:', images.length);
// 初始绘制第一帧
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[0], 0, 0);
// 滚动驱动帧切换（注意：使用 requestAnimationFrame 包裹以对齐刷新率）
window.addEventListener('scroll', () => {
const scrollTop = document.documentElement.scrollTop;
const scrollFraction = Math.min(1, scrollTop / 750); // 归一化 [0, 1]
const frameIndex = Math.min(frameCount - 1, Math.floor(scrollFraction * frameCount));
requestAnimationFrame(() => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[frameIndex], 0, 0);
});
});
};
init();⚠️ 关键注意事项
- 禁止复用同一 Image 实例：每个帧必须对应独立 Image 对象，否则 onload 回调可能被覆盖或错乱；
- 务必处理 onerror：网络失败时提供降级策略（如占位图或日志告警）；
- Canvas 尺寸需显式设置：避免 CSS 缩放导致像素失真，且应在预加载前完成 canvas.width/height 设置；
- requestAnimationFrame 是必需的：确保绘制与屏幕刷新率同步，避免丢帧；
- 内存权衡：120 张 750×750 PNG（约 1–3 MB/张）可能占用百 MB 内存，生产环境建议按需分段加载或使用 WebP/AVIF 压缩。
通过将「资源加载」与「渲染执行」彻底解耦，本方案消除了所有因加载时机不可控导致的视觉中断，实现真正丝滑的滚动帧动画。对于高保真产品展示场景，这是兼顾效果与稳定性的最佳实践。
