HTML Canvas（游戏应用）图片预加载问题咨询

问题根源 #

你遇到的核心问题是图片尚未加载完成就调用了drawImage。你参考的示例能正常运行，大概率是因为图片资源体积小、加载速度快，或者项目中存在你没注意到的隐性加载等待逻辑，但直接返回未加载完成的Image对象的写法本身不可靠。

当执行img.src = src后，浏览器才开始异步加载图片，此时立刻返回的Image对象还处于未就绪状态，调用drawImage时自然无法渲染出内容。

解决方案 #

以下两种方案都能让你获得可在draw函数中直接使用的已加载图片变量：

方案1：用Promise封装加载逻辑（推荐） #

通过Promise确保图片加载完成后再赋值给变量，甚至可以在加载完成后再启动渲染循环：

const loadImage = (src) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = (err) => reject(err);
    img.src = src;
  });
};

// 预加载图片并初始化渲染
let avatar;
loadImage('sourceurl.png')
  .then(img => {
    avatar = img;
    requestAnimationFrame(render);
  })
  .catch(err => console.error('图片加载失败:', err));

function render() {
  if (!avatar) return; // 图片未加载完成时跳过渲染
  context.drawImage(avatar, x, y, width, height);
  requestAnimationFrame(render);
}

方案2：通过onload回调标记图片就绪 #

如果不想使用Promise，也可以直接给Image对象绑定加载完成回调，在回调中标记图片可用：

let avatar = null;
const img = new Image();
img.onload = () => {
  avatar = img;
};
img.onerror = () => console.error('图片加载失败');
img.src = 'sourceurl.png';

function render() {
  if (!avatar) return;
  context.drawImage(avatar, x, y, width, height);
  requestAnimationFrame(render);
}

补充说明 #

你参考的示例代码之所以能运行，是因为项目实际流程中可能存在其他等待逻辑（比如等待连接建立、其他资源加载完成），这些操作的耗时刚好让图片完成加载，但这种依赖偶然时机的写法不具备通用性，在网络条件差或图片体积大的场景下必然会出现渲染失败的问题。

内容的提问来源于stack exchange，提问作者u-lx