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數組。