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等于所有这些事件的机会非常好。

以下是解决问题的一种方法：

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

将大量图像绘制到html5画布

1 个答案: