Question

我在画布上绘制背景，在背景上绘制小图像。但有时候，背景画在小图像上。为什么？

JavaScript代码 -

var canvasupdate = document.getElementById("myCanvas");
ctxupdate = canvasupdate.getContext("2d");
var background = new Image();
background.src = sitePath + "ATOM/chapter1/book/" + `bgimagename`;
background.onload = function() {
    ctxupdate.drawImage(background, 0, 0); // set background image 
};



var imageobj = new Array();
for (var d = 0; d < calloutImageArray.length; d++) // getting small images in array
{
    imageobj[d] = new Image();
    (function(d) {
        imageobj[d].src = sitePath + "ATOM/chapter1/book/" + calloutImageArray[d];
        imageobj[d].onload = function() {
            ctxupdate.drawImage(imageobj[d], calloutImageArrayX[d], calloutImageArrayY[d], calloutImageArrayW[d], calloutImageArrayH[d]);
        };
    })(d);
}

在上面的代码中，应该首先执行背景图像代码然后调出图像（小图像）代码执行但是有时候执行小图像代码然后执行背景图像代码为什么？

Answer 1

所有图像都是异步加载的。因此，有时在背景图像之前加载（和绘制）小图像。请查看例如Chrome中的“网络”标签，按顺序完成资源加载。

此问题的最简单解决方案是将小图像加载到背景图像的load事件的回调函数中。

Answer 2

onLoad函数以异步方式运行。这意味着JavaScript将继续运行其余代码，并在加载背景图像时运行回调函数。这就是为什么你的第二部分代码首先运行。所以请尝试在onload函数中添加代码，如下所示：

var canvasupdate = document.getElementById("myCanvas");
ctxupdate = canvasupdate.getContext("2d");
var background = new Image();
background.src = sitePath + "ATOM/chapter1/book/" + `bgimagename`;
background.onload = function() {
    ctxupdate.drawImage(background, 0, 0); // set background image 
    var imageobj = new Array();
    for (var d = 0; d < calloutImageArray.length; d++) // getting small images in array
    {
         imageobj[d] = new Image();
         (function(d) {
            imageobj[d].src = sitePath + "ATOM/chapter1/book/" + calloutImageArray[d];
            imageobj[d].onload = function() {
             ctxupdate.drawImage(imageobj[d], calloutImageArrayX[d], calloutImageArrayY[d], calloutImageArrayW[d], calloutImageArrayH[d]);
           };
         })(d);
    }
};

通过这种方式，您可以确保先设置背景，然后再设置小图像。请注意，我没有尝试使用您的代码来检查它是否符合您的要求，我只是重新排列代码块以向您显示逻辑以及为什么不按预期运行。希望它有所帮助

为什么JavaScript代码有时会执行第二部分

2 个答案: