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の現在の値で即座に呼び出します。これにより、現在の値が新しい変数に取り込まれ、その新しい変数がイベントハンドラに渡されます。