在HTML画布上加载图像

Question

到目前为止，我有一个函数接下来应该得到一个时间（只是几个小时），然后比较if语句中的小时数以将正确的时钟加载到imageURLs []数组中。据我可以告诉这工作正常。然后运行loadAllimages（）函数，它应该将图像加载到数组imgs []中。然后它应该在方法start（）中绘制图像。我这样做是因为药丸图像在时钟的顶端，我需要它来正确加载。问题是loadAllimages（）函数无效，我找不出原因。到目前为止，所有我可以告诉是因为在start（）函数imgs.length开始就没有把它在阵列IMGS []为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阵列中订购。