Question

我试图在画布上绘制一个图像数组，但是我遇到了onload方法的问题。

我认为这可能是一个问题，因为在onload完成之前无法在画布上绘制图像，并且因为它内部的FOR可能我丢失了所有参考...

这是我的代码：

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Create an image element
var bg = document.createElement('IMG');


// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(bg, 0, 0);

}

// Specify the src to load the image
fondo.src = "../img/auxfinal.png";
img.src = "../img/bolso.png";


// var res is is my array where i have on each position (img name, x, y)

var arrayLength = res.length;

for (var i = 0; i < arrayLength; i++) {
    var aux = document.createElement('IMG');

    aux.onload = function () {
        ctx.drawImage(aux, res2[1].substr(0,res2[1].length-2), res2[2].substr(0,res2[2].length-2));
    }




}

Answer 1

正如@gtramontina所说，你的aux加载循环不起作用，因为它没有设置任何.src，也因为第一个辅助变量将被第二次循环遍历（等）。

您可能想要将一个图像加载器添加到您的工具箱中...这是一个（但有很多）：

// image loader

var imagesOK=0;
var imgs=[];

var imageURLs=[];  
// put the paths to your images here
imageURLs.push("../img/auxfinal.png");
imageURLs.push("../img/bolso.png");
// ... and push all your other images also

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[]

    // for example,
    // auxfinal.png is in imgs[0] & this will draw auxfinal.png
    ctx.drawImage(imgs[0],0,0);

}

在CANVAS上绘制图像阵列

1 个答案: