将大量图像绘制到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的当前值调用它。这会导致它在新变量中捕获其当前值，并将该新变量传递给事件处理程序。