画布重叠图像反转顺序答案

【问题标题】：Canvas overlapping images reversing order画布重叠图像反转顺序
【发布时间】：2018-10-13 01:00:58
【问题描述】：

当我使用此代码在 HTML5 画布上绘图时：

<canvas id="game">Your browser can't use canvas</canvas>
<script>
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var a = new Image();
a.onload = function() {
ctx.drawImage(a,50,40,50,50);
}
a.src = "image1.png";
var b = new Image();
    b.onload = function() {
ctx.drawImage(b,50,60,50,50);
}
b.src = "image2.png";
</script>
</body>
</html>

Image2.png 出现在 Image1.png 的顶部。但是，在我重新加载页面后，图像顺序相反。此外，有时在第一次加载（而不是重新加载）时，Image1.png 会出现在 image2 的顶部。

如果我在 2 次重新加载图像更改顺序后以相同的顺序（Image1 然后 Image2）绘制图像两次。

我在 Windows 8 上使用 Firefox 59.0.3 64 位。

这是我的代码问题还是 Firefox 中的错误？

【问题讨论】：

你的代码有问题。您的两个异步回调没有任何同步逻辑，这会引入竞争条件。

标签： javascript html image html5-canvas

【解决方案1】：

因为您无法控制 onload 事件何时触发的顺序。在不过多更改代码的情况下纠正此问题的最简单方法（如果我是你，我会附加相同的 onload 函数并使用包装器来封装你的变量）：

<canvas id="game">Your browser can't use canvas</canvas>
<script>
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var counter = 2;
var a = new Image();
a.onload = function() {
counter--;
if(!counter) {
    ctx.drawImage(a,50,40,50,50);
    ctx.drawImage(b,50,60,50,50);
}
}
a.src = "image1.png";
var b = new Image();
    b.onload = function() {
counter--;
if(!counter) {
    ctx.drawImage(a,50,40,50,50);
    ctx.drawImage(b,50,60,50,50);
}
}
b.src = "image2.png";
</script>
</body>
</html>

【讨论】：