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的顶部。

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

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

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

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>

画布重叠图像反转顺序

1 个答案: