在 HTML 画布上加载图像的问题

Question

到目前为止，我有一个函数 next 应该获取时间（只是小时），然后比较 if 语句中的小时以将正确的时钟加载到 imageURLs[] 数组中。据我所知，这很好用。然后运行 ​​loadAllimages() 函数，它应该将图像加载到数组 imgs[] 中。然后它应该在 start() 方法中绘制图像。我这样做是因为药丸图像在时钟之上，我需要它正确加载。问题是 loadAllimages() 函数不起作用，我不知道为什么。到目前为止，我只能说它没有将它推到数组 imgs[] 上，因为在 start() 函数的开头，imgs.length 为 0。

function next(){
var currentdate = new Date();
var datetime = currentdate.getHours();
var imageURLs=[];
var imagesOK=0;
var imgs=[];
if(datetime==1||datetime==13){
imageURLs.push("clock/clock1.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==2||datetime==14){
imageURLs.push("clock/clock2.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==3||datetime==15){
imageURLs.push("clock/clock3.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==4||datetime==16){
imageURLs.push("clock/clock4.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==5||datetime==17){
imageURLs.push("clock/clock5.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==6||datetime==18){
imageURLs.push("clock/clock6.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==7||datetime==19){
imageURLs.push("clock/clock7.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==8||datetime==20){
imageURLs.push("clock/clock8.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==9||datetime==21){
imageURLs.push("clock/clock9.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==10||datetime==22){
imageURLs.push("clock/clock10.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==11||datetime==23){
imageURLs.push("clock/clock11.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==0||datetime==12){
imageURLs.push("clock/clock12.png");
imageURLs.push("clock/pill.png");
}

loadAllImages();

function loadAllImages(){

    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        img.src = imageURLs[i];
        img.onload = function(){ 
            imgs.push(img);
        };
    } 
    if(i==imageURLs.length){
    start();
    }

}

function start(){
    // the imgs[] array holds your fully loaded images
    for (var i=0; i<imgs.length; i++) {
    if(i==0){
        canvas.ctx.drawImage(this, 600,100);
        }
        else{
        canvas.ctx.drawImage(this, 740, 240 );
        }
    }
    // the imgs[] are in the same order as imageURLs[]

}
}

Answer 1

加载是异步发生的，而不是立即发生的。您应该将代码更改为

imgs.push(img);
if (imgs.length == imageURLs.length) start();

在onload 处理程序中。

但请注意，imgs 数组中的顺序可能与 imageURLs 数组中的顺序不同。

IMO 一种更简洁的方法是立即将图像放入列表中，并在加载完成时增加一个计数器：

function loadAllImages(){
    var count = 0;
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        img.onload = function(){
            if (++count == imageURLs.length) start();
        };
        img.src = imageURLs[i];
        imgs.push(img);
    }
}

这样图像在数组中的顺序就是imageURLs数组中的顺序。