javascript - 画布重叠图像反转顺序

Question

当我使用以下代码在 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 的顶部。

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

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

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

标签： javascripthtmlimagehtml5-canvas

Answer 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>