이미지 배열이 HTML5 Canvas에 그려지지 않는 이유는 무엇입니까?

Question

저는 캔버스를 사용하여 타일 맵을 그리려합니다. 캔버스에 그릴 필요가있는 타일에는 세 가지 유형이 있습니다. 각 개별 이미지에 대해 세 번 함수를 호출하는 대신 이미지의 배열을 매개 변수로 전달하고 배열을 반복하며 캔버스로 말합니다. 각 이미지를 그립니다. 그러나이 작업을 수행 할 때 오류 메시지가 반환되지 않은 빈 캔버스가 나타납니다. 배열을 전달하지 않고 각 이미지에 대해 함수 호출을 수동으로 수행하면 이미지가 캔버스에 그려집니다. 누구든지 내가 잘못하고있는 것을 나에게 설명 할 수 있을까?

window.onload = function(){ 
    var basemap = document.getElementById("basemap"); 
    var basemapCtx = basemap.getContext("2d"); 
    initMap(Map.map, basemapCtx, basemap); 
} 

function initMap(map, ctx, canvas){ 
    var deepWater = new Image(); 
    var shallowWater = new Image(); 
    var coastalWater = new Image(); 
    deepWater.src = "deepWater.png"; 
    shallowWater.src = "shallowWater.jpg"; 
    coastalWater.src = "coastalWater.jpg"; 
    //Does not draw the images 
    drawMap(map, [deepWater, shallowWater, coastalWater], ctx, canvas, [-2, -1, 0]); 
    //Does draw the images 
    //drawMap(map, deepWater, ctx, canvas, -2); 
    //drawMap(map, shallowWater, ctx, canvas, -1); 
    //drawMap(map, coastalWater, ctx, canvas, 0); 
} 

function drawMap(map, image, ctx, canvas, pos){ 
    var screenWidth = canvas.width; 
    var screenHeight = canvas.height; 
    var tileWidth = 0; 
    var tileHeight = 0; 
    var xPos = 0; 
    var yPos = 0; 
    for(var i = 0; i < image.length; i++){ 
     image[i].onload = function(){ 
      for(var rows = 0; rows < map.length; rows++){ 
       tileHeight = (screenHeight/map.length); 
       for(var cols = 0; cols < map[rows].length; cols++){ 
        tileWidth = (screenWidth/map[rows].length); 
        if(map[rows][cols] == pos[i]){ 
         ctx.drawImage(image[i], xPos, yPos, tileWidth, tileHeight); 
        } 
        xPos += tileWidth; 
       } 
       xPos = 0; 
       yPos += tileHeight; 
      } 
      yPos = 0; 
      tileWidth = 0; 
      tileHeight = 0; 
     } 
    } 
} 

Answer 1

onload 이벤트는 현재 함수가 반환되고 Javascript가 아무 작업도 수행하지 않을 때 발생합니다. for 루프는 i 변수를 사용합니다. onload 이벤트가 발생하면 i 값은 image.length이고 마지막 이미지는 1입니다.

각 onload 이벤트의 변수를 해당 호출에 고유하게 만들어야합니다. 폐쇄를 사용하면 그렇게 할 수 있습니다. 따라서이 변수 온로드 함수가 호출 될 때마다의 독특한있을 것이다

function drawMap(map, image, ctx, canvas, pos){ 

    function setOnLoad(i){ // this function creates closure over the variable i so 
          // that it is unique each time this function and the onload 
          // function runs. 
     var screenWidth = canvas.width; 
     var screenHeight = canvas.height; 
     var tileWidth = 0; 
     var tileHeight = 0; 
     var xPos = 0; 
     var yPos = 0; 
     // the following function closes over all the variables in this function 
     image[i].onload = function(){ 
      for(var rows = 0; rows < map.length; rows++){ 
       tileHeight = (screenHeight/map.length); 
       for(var cols = 0; cols < map[rows].length; cols++){ 
        tileWidth = (screenWidth/map[rows].length); 
        if(map[rows][cols] == pos[i]){ 
         ctx.drawImage(image[i], xPos, yPos, tileWidth, tileHeight); 
        } 
        xPos += tileWidth; 
       } 
       xPos = 0; 
       yPos += tileHeight; 
      } 
     } 
    } 
    for(var i = 0; i < image.length; i++){ 
     setOnLoad(i); 
    } 
} 

을 다음과 같이

코드를 변경

.