JavaScript/HTML5 Canvas - 加载图像数组

Question

我有一个图像文件夹，共32x32个图块。我正在尝试使用JavaScript将这些图像加载到HTML5画布上。

这是我有：

window.onload = function(){ 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    var tiles = []; 

    canvas.width = 512; 
    canvas.height = 352; 


    for (x = 0; x <= 520; x++) { 
     imageObj.src = "line_tile/t"+x+".png"; 
     tiles.push(imageObj); 
    } 

    var theX; 
    var theY; 
    for (x = 0; x <= 10; x++) { 
     for (y = 0; y <= 15; y++) { 

      theX = x*32; 
      theY = y*32; 

      context.drawImage(tiles[2], theY, theX,32,32); 
      console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+theX+" | Y Pos: "+theY); 
     } 
    } 
}; 

的问题是，这个代码只加载了最后的区块（在这种情况下tile[520]）。实际上我想加载所有的瓷砖。无论。我如何推动一组图像到数组中并加载它？

Answer 1

您修改了一个imageObj的实例;所以基本上你最终都指向同一个实例，其中有520

结束阵列尝试

for (x = 0; x <= 520; x++) { 
    var imageObj = new Image(); // new instance for each image 
    imageObj.src = "line_tile/t"+x+".png"; 
    tiles.push(imageObj); 
} 

Answer 2

不严格把你的问题，但你可能会遇到它（与当前代码）

我不确定如果您不需要首先查看图像是否实际加载之前将它添加到tiles数组。