在HTML画布上加载图像时出现问题

issue loading images on HTML canvas

本文关键字：问题 图像 加载 HTML      更新时间：2023-11-16

到目前为止，我有一个函数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[]
}
}

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

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

在CCD_ 1处理程序内部。

然而，请注意，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);
    }
}

以这种方式，图像在阵列中的顺序是CCD_ 4阵列中的次序。

相关文章：