將大量圖像繪製到html5畫布

Question

我遇到了將大量圖像加載到HTML畫布元素的問題。基本上我要做的是獲取數組中每個圖像的一小部分（1px w，256px 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的當前值調用它。這會導致它在新變量中捕獲其當前值，並將該新變量傳遞給事件處理程序。