변수 이름을 사용하여 이미지 그리기

Question

저는 JS 초보자입니다. 이미지를 그릴 때 변수 이름을 사용하는 것에 관한 질문이 있습니다. 이전 게시물에서 정확한 답변을 찾지 못했습니다. 내가 놓친다면 미안해.

var tile025 = new Image(); 
tile025.src = "LandTile08.jpg"; 

내가 다음에 이러한 이상을 호출 할 것이다 ...

var tile00 = new Image(); 
tile00.src = "SeaTile00.jpg"; 

var tile01 = new Image(); 
tile01.src = "SeaTile01.jpg";   

var tile02 = new Image(); 
tile02.src = "SeaTile02.jpg"; 

등 :

나는 캔버스에 tilemap을 그리려는, 나는 타일과 같이 설정 이미지가 드로잉은 다음과 같이 각 맵 스퀘어에 대한 값 (0 ~ 25)을 보유하는 2 차원 100x100 MapArray의 변수 값과 함께 표시됩니다.

for (i=0;i<100;i++){ 

    for (j=0;j<100;j++) { 

     X = 10*j; 
     Y = 10*i; 

     ImageName = "tile0" + MapArray[i][j].toString(); 

     ctx.drawImage(ImageName, X,Y); 

    } 
} 

...

이렇게하면 유형 오류가 발생합니다. 그러나 예를 들어 쓰기

ctx.drawImage(tile00, X,Y); 

잘 작동하므로 이미지를 만들었습니다.

아무도 도와 줄 수 있습니까? drawImage(img, x,y)과 함께 사용할 img 변수를 만드는 방법이 있습니까?

Answer 1

귀하의 ImageName은 단지 문자열이므로 그 이미지를 그리기 위해 오류가 발생합니다. 개체에 각 이미지를 저장하면 나중에 이미지에 액세스 할 수 있습니다. Image 객체에 src을 설정하는 작은 유틸리티 함수도 추가했습니다.

var createImage = function (src) { 
    var img = new Image(); 
    img.src = src; 
    return img; 
}; 

var images = { 
    tile00: createImage("SeaTile00.jpg"), 
    tile01: createImage("SeaTile01.jpg"), 
    tile02: createImage("SeaTile02.jpg"), 
    // etc... 
}; 
for (i = 0; i < 100; i++){ 
    for (j = 0; j < 100; j++) { 
     X = 10 * j; 
     Y = 10 * i; 
     ctx.drawImage(images["tile0" + MapArray[i][j].toString()], X, Y); 
    } 
} 

이 방법이 효과가 있지만 내부 루프에 이미지를 만들지 않는 이유는 무엇입니까?