将大量图像绘制到 html5 canvas

Question

我在将大量图像加载到 html canvas 元素时遇到问题。基本上我想做的是获取数组中每个图像的一小部分（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

这是一个闭包问题，与canvas无关。当循环到位时，您将围绕 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 的当前值调用它。这会导致它捕获新变量中的当前值，并将该新变量传递给事件处理程序。