如何反转HTML5 Canvas中重叠图片的绘制顺序？

Canvas的绘图逻辑很直白：后绘制的元素会覆盖先绘制的元素。你现在遇到的问题，本质是图片加载是异步操作——哪个图片先加载完成就会先被绘制，最终导致image2.png盖在了image1.png上面。要反转这个顺序，我们需要确保image1.png在image2.png之后绘制，或者统一控制绘制时机，让层级完全可控。

下面是两种可靠的解决方案：

方案一：用Promise统一加载图片后按顺序绘制 #

这个方法利用Promise处理异步加载，等两张图片都加载完成后，再按我们想要的顺序绘制（先画底层的image2.png，再画上层的image1.png）：

<canvas id="game">Your browser can't use canvas</canvas>
<script>
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');

// 封装一个图片加载的工具函数，返回Promise
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = err => reject(err);
    img.src = src;
  });
}

// 并行加载两张图片，加载完成后按指定顺序绘制
Promise.all([loadImage('image1.png'), loadImage('image2.png')])
  .then(([img1, img2]) => {
    // 先绘制image2（作为底层）
    ctx.drawImage(img2, 50, 60, 50, 50);
    // 再绘制image1（覆盖在image2上方）
    ctx.drawImage(img1, 50, 40, 50, 50);
  })
  .catch(err => console.error('图片加载失败:', err));
</script>

方案二：用计数器控制绘制时机（兼容旧环境） #

如果不想用Promise，也可以通过计数器跟踪图片加载状态，等两张图片都加载完成后再执行绘制：

<canvas id="game">Your browser can't use canvas</canvas>
<script>
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');

let loadedImageCount = 0;
const loadedImages = {};

// 检查所有图片是否加载完成，完成则按顺序绘制
function onAllImagesLoaded() {
  if (loadedImageCount === 2) {
    // 先画底层的image2
    ctx.drawImage(loadedImages.image2, 50, 60, 50, 50);
    // 再画上层的image1
    ctx.drawImage(loadedImages.image1, 50, 40, 50, 50);
  }
}

// 加载image1
const image1 = new Image();
image1.onload = function() {
  loadedImages.image1 = this;
  loadedImageCount++;
  onAllImagesLoaded();
};
image1.src = "image1.png";

// 加载image2
const image2 = new Image();
image2.onload = function() {
  loadedImages.image2 = this;
  loadedImageCount++;
  onAllImagesLoaded();
};
image2.src = "image2.png";
</script>

为什么这两种方法有效？ #

原来的代码中，每张图片加载完成后立即绘制，绘制顺序完全取决于图片的加载速度，不可控。而上面的两种方法，都是等所有图片准备好后，手动指定绘制顺序——先画你想要在底层的图片，再画要在顶层的图片，这样就能100%保证层级符合预期。

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