Javascript 画布上绘图-未执行onload

我试着在画布上画多幅图像

我使用js来归档这个

//in draw method:
 Images[counter] = new Image();
    Images[counter].src = "/anImage.png";
    for (var i = counter; i >= 0; i--)
    {
        attach(ctx, Images[i], xCordinates[i], yCordinates[i]);
    }

function attach (cont, img, x, y) {
    try
    {

        img.onload = function () {

            cont.drawImage(this, x, y);
        }
    }
    catch(ex)
    {
        alert(ex);
    }
}

我的问题是，这些图像不正确。实际上，只显示最后一张图像。我检查我的代码，并绝对确保我提交给“attach”方法的坐标是正确的。由于调试，我发现onload只对循环中的最后一个映像执行，我做错了什么

---

提前感谢。

这里有一个图像加载程序示例，它将加载所有图像，然后调用start（）函数

start（）中的所有代码都可以依赖以下事实：所有图像都已完全加载：

// image loader

// put the paths to your images in imageURLs[]
var imageURLs=[];  
// push your image urls!
imageURLs.push("");

// the loaded images will be placed in images[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    // example
    for(var i=0;i<imgs.length;i++){
        cont.drawImage(imgs[i],i*30,i*30);
    }

}

//图像加载程序
//将图像的路径放在imageURLs[]
var-imageurl=[]；
//推你的图片网址！
ImageURL.push（“”）；
//加载的图像将放置在图像[]中
var-imgs=[]；
var-imagesOK=0；
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
函数start（）{
//imgs[]阵列现在保存完全加载的图像
//imgs[]与ImageURL[]的顺序相同
//范例
对于（var i=0；i