在CANVAS上绘制图像阵列

Question

我试图在画布上绘制图像数组，但是我的onload方法有问题。

我认为这可能是一个问题，因为图像不能在画布上完成的onload之前绘制的，因为内幕它可能是我失去了所有的参考...

这里是我的代码：

// 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说，您的辅助装载循环将无法工作，因为它没有设置任何的.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); 

}