求助：使用Async/Await实现Canvas多图片按顺序加载绘制

问题原因 #

你当前的代码是同时触发所有图片的加载请求，图片加载完成的顺序取决于网络速度，因此会出现绘制顺序混乱的情况。要保证正确的层级顺序，必须让前一张图片加载并绘制完成后，再开始加载下一张。

解决方案 #

方法1：Promise链式调用 #

通过.then()将图片加载操作串联，确保前一步完成后再执行下一步：

function addImageProcess(src){
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.onload = () => resolve(img)
    img.onerror = reject
    img.src = src
  })
}

// 提前获取Canvas上下文，避免重复调用
const ctx = canvas2.getContext('2d');

addImageProcess('sky.png')
  .then(img => { ctx.drawImage(img, 0, 0); return addImageProcess('clouds.png') })
  .then(img => { ctx.drawImage(img, 0, 0); return addImageProcess('moutains.png') })
  .then(img => { ctx.drawImage(img, 0, 0); return addImageProcess('hills.png') })
  .then(img => { ctx.drawImage(img, 0, 0); return addImageProcess('grass.png') })
  .then(img => { ctx.drawImage(img, 0, 0); return addImageProcess('road.png') })
  .then(img => { ctx.drawImage(img, 0, 0); return addImageProcess('car.png') })
  .then(img => { ctx.drawImage(img, 0, 0) })
  .catch(err => console.error('图片加载失败:', err));

方法2：async/await（更简洁易读） #

将图片路径存入数组，用循环配合async/await依次处理：

function addImageProcess(src){
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.onload = () => resolve(img)
    img.onerror = reject
    img.src = src
  })
}

async function drawScene() {
  const ctx = canvas2.getContext('2d');
  // 按层级顺序排列图片路径
  const imagePaths = [
    'sky.png',
    'clouds.png',
    'moutains.png',
    'hills.png',
    'grass.png',
    'road.png',
    'car.png'
  ];

  for (const path of imagePaths) {
    try {
      const img = await addImageProcess(path);
      ctx.drawImage(img, 0, 0);
    } catch (err) {
      console.error(`加载图片 ${path} 失败:`, err);
      // 可选：如果某张图加载失败，是否继续绘制后续图片
      continue;
    }
  }
}

// 启动绘制流程
drawScene();

额外优化建议 #

• 提前获取Canvas上下文，避免重复调用getContext('2d')，减少性能开销。
• 添加错误捕获逻辑，防止单张图片加载失败导致整个绘制流程中断（可根据需求调整是否终止流程）。

内容的提问来源于stack exchange，提问作者Allan