Javascript 加载数组中的所有图像后如何使用drawImage

我想在加载所有图像后使用drawImage绘制图像数组。drawImage（）存在渲染问题，尝试使用setTimeout（）解决，但始终不起作用

这是我的密码

    while(FocusItem.length>0)
    {
        FocusItem.pop();
    }

    ftx=canvas.getContext('2d');

    focusImageBackground = new Image();
    focusImageBackground.src = "./images/odaklanma/odaklanmaBackground.jpg";

    if(RandomSoru==15)
        finishSoru=true;

    if(finishSoru)
    {
        RandomSoru = Math.floor((Math.random() * 15)+1);
        tempRandomSoru=RandomSoru;
    }

    if(RandomSoru==tempRandomSoru)
    {
        RandomSoru = Math.floor((Math.random() * 15)+1);
    }

    var soru = new Object();
    soru["image"] =  new Image();
    soru.image.src = './images/odaklanma/level/'+RandomSoru+'/soru.png';
    soru["x"] = 341;
    soru["y"] = 140;
    FocusItem.push(soru);

    var dogru = new Object();
    dogru["image"] =  new Image();
    dogru.image.src = './images/odaklanma/level/'+RandomSoru+'/dogru.png';
    dogru["x"] = xDogru;
    dogru["y"] = 280;
    FocusItem.push(dogru);

    var yanlis = new Object();
    yanlis["image"] =  new Image();
    yanlis.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis.png';
    yanlis["x"] = xYanlis1;
    yanlis["y"] = 280;
    FocusItem.push(yanlis);

    var yanlis2 = new Object();
    yanlis2["image"] =  new Image();
    yanlis2.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis1.png';
    yanlis2["x"] = xYanlis2;
    yanlis2["y"] = 280;
    FocusItem.push(yanlis2);

}

if(focusImageBackground.complete){
    if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
    drawFocus();
    else
        setTimeout(drawFocus,600);
}
else
    focusImageBackground.onload=function(){
        if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
            drawFocus();
        else
            setTimeout(drawFocus,600);
    }


function drawFocus(){
ftx.drawImage(focusImageBackground,0,0);

for (var i=0; i<FocusItem.length; i++){
    FocusItem[i].image.onload=function(){
        ftx.drawImage (FocusItem[i].image, FocusItem[i].x, FocusItem[i].y);
    }

}

while（焦点项目长度>0）
{
FocusItem.pop（）；
}
ftx=canvas.getContext（'2d'）；
focusImageBackground=新图像（）；
focusImageBackground.src=“./images/odaklanma/odaklanamaboutground.jpg”；
if（RandomSoru==15）
finishSoru=true；
if（finishSoru）
{
RandomSoru=Math.floor（（Math.random（）*15）+1）；
tempdrandomsoru=RandomSoru；
}
if（RandomSoru==tempdrandomsoru）
{
RandomSoru=Math.floor（（Math.random（）*15）+1）；
}
var soru=新对象（）；
soru[“图像”]=新图像（）；
soru.image.src='./images/odaklanma/level/'+RandomSoru+'/soru.png'；
索鲁[“x”]=341；
soru[“y”]=140；
聚焦项目推送（soru）；
var dogru=新对象（）；
dogru[“图像”]=新图像（）；
dogru.image.src='./images/odaklanma/level/'+RandomSoru+'/dogru.png'；
dogru[“x”]=xDogru；
dogru[“y”]=280；
聚焦项目推送（dogru）；
var yanlis=新对象（）；
yanlis[“图像”]=新图像（）；
yanlis.image.src='./images/odaklanma/level/'+RandomSoru+'/yanlis.png'；
yanlis[“x”]=xYanlis1；
yanlis[“y”]=280；
焦点项目推送（yanlis）；
var yanlis2=新对象（）；
yanlis2[“图像”]=新图像（）；
yanlis2.image.src='./images/odaklanma/level/'+RandomSoru+'/yanlis1.png'；
yanlis2[“x”]=xYanlis2；
yanlis2[“y”]=280；
聚焦项目推送（yanlis2）；
}
if（focusImageBackground.complete）{
if（FocusItem[0]。image.complete&&FocusItem[1]。image.complete&&FocusItem[2]。image.complete&&FocusItem[3]。image.complete）
drawFocus（）；
其他的
设置超时（drawFocus，600）；
}
其他的
focusImageBackground.onload=函数（）{
if（FocusItem[0]。image.complete&&FocusItem[1]。image.complete&&FocusItem[2]。image.complete&&FocusItem[3]。image.complete）
drawFocus（）；
其他的
设置超时（drawFocus，600）；
}
函数drawFocus（）{
ftx.drawImage（focusImageBackground，0,0）；
对于（var i=0；i我建议加载所有图像，然后当它们全部完成时，您可以调用代码的其余部分。我不太明白您试图用代码的其余部分做什么，但这里有一个加载图像URL数组并知道何时完成的简单方法

这是一个总体思路（我省略了许多与了解何时加载所有图像这一中心问题无关的代码），我还尝试更新您的代码：

function createImagesNotify(srcs, fn) {
   var imgs = [], img;
   var remaining = srcs.length;
   for (var i = 0; i < srcs.length; i++) {
       img = new Image();
       imgs.push(img);
       img.onload = function() {
           --remaining;
           if (remaining == 0) {
               fn(srcs);
           }
       };
       // must set .src after setting onload handler
       img.src = srcs[i];
   }
   return(imgs);
}

// here's your starting array of filenames
var fnames = ["soru.png", "dogru.png", "yanlis.png", "yanlis1.png"];
// insert your process to create RandomSoru here
var randomSoru = ....;

// build full urls array
var urls = [];
for (var i = 0; i < fnames; i++) {
    urls.push('./images/odaklanma/level/' + RandomSoru + '/' + fnames[i]);
}

// load all images and call callback function when they are all done loading
var imgs = createImagesNotify(urls, function() {
    // all images have been loaded here
    // do whatever you want with all the loaded images now (like draw them)

});

函数createImagesNotify（srcs，fn）{
var-imgs=[]，img；
剩余var=srcs.length；
对于（变量i=0；i

---

这段代码基于我之前的回答：

有什么错误？你能把它发布到jsfiddle.com上让我们看到吗？非常好！谢谢：）