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]에서) 마지막 타일을로드하는 것입니다. 실제로 모든 타일을로드하려고합니다. 무슨 일이 있어도. 어떻게하면 이미지 집합을 propailyly 배열에 넣고로드 할 수 있습니까?

Answer 1

imageObj의 단일 인스턴스를 수정하는 중입니다. 그래서 기본적으로 당신은 당신의 문제에

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

엄격하게 관련이없는 시도 모두 520

로 끝나는 같은 인스턴스를 가리키는 배열로 끝날하지만 당신은

(현재 코드)를 발생할 수 있습니다

이미지가 실제로로드되었는지 인지 먼저 확인하지 않아도 타일 배열에 추가하기 전에을 추가해야하는지 확실하지 않습니다.