Question

我尝试将多个图像放入画布中。

我使用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);
    }
}

我遇到的麻烦是，图像不是正确的。实际上，只显示最后一张图像。我检查我的代码我绝对确定我提交给＆＃34; attach＆＃34; - 方法的坐标是正确的。由于调试我发现，只有onload只针对Loop中的最后一个Image执行，我做错了什么？

提前致谢。

Answer 1

这是一个图像加载器的例子，它将加载所有图像，然后调用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);
    }

}

在画布上绘图 - onload未执行

1 个答案: