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数组中的顺序。

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

1 个答案: