큰 배열의 이미지를 html5 캔버스로 그립니다.

Question

큰 이미지 배열을 html 캔버스 요소에로드하는 데 문제가 있습니다. 기본적으로 배열에서 모든 이미지의 작은 부분 (1 픽셀 w, 256 픽셀 h)을 얻고 이러한 모든 작은 이미지로 캔버스에 새 그림을 작성합니다.

이 코드를 실행하면 화면의 모든 이미지가 인쇄됩니다. 그러나 for 루프를 사용하여 실행하면 이미지가 흰색으로 유지됩니다.

function addToCanvas() 
{ 
    drawingCanvas = document.getElementById('myDrawingCanvas'); 
    context = drawingCanvas.getContext('2d'); 
     //for(imgNo=0;imgNo<256;imgNo++){ 
     var imgObj = new Image(); 
     imgObj.onload = function() { 
      context.drawImage(imgObj, 0, 0, 1, 256, 0+(imgNo), 0, 1, 256); 
     } 
     imgObj.src = imgs[imgNo]; 
     imgNo++;  
     //} 
} 

Answer 1

이것은 닫는 문제이며 캔버스와 관련이 없습니다. 루프가 제자리에 있으면 값이 아닌 imgNo 변수 주위에 클로저를 만듭니다. 따라서 이벤트 핸들러가 최종적으로 실행될 때 루프가 끝났을 가능성이 매우 높으며 imgNo은 모두 256과 같습니다.

function addToCanvas() 
{ 
    drawingCanvas = document.getElementById('myDrawingCanvas'); 
    context = drawingCanvas.getContext('2d'); 
     for(imgNo=0;imgNo<256;imgNo++){ 
     var imgObj = new Image(); 
     imgObj.onload = (function(i) { 
      return function() { 
      context.drawImage(imgObj, 0, 0, 1, 256, 0+(i), 0, 1, 256); 
      } 
     })(imgNo); 

     imgObj.src = imgs[imgNo]; 
     imgNo++;  
    } 
} 

내가 함수를 반환하는 익명 함수를 만드는 오전, 그것은 이벤트 핸들러를 반환

는 여기를 해결하는 한 가지 방법입니다. 그런 다음 즉시 imgNo의 현재 값으로 호출하십시오. 이로 인해 새 변수에서 현재 값을 캡처하고 새 변수를 이벤트 처리기로 전달합니다.