將大量圖像繪制到html5畫布

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

這是一個關閉問題，與畫布無關。 循環到位后，您將圍繞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的當前值調用它。 這導致它在新變量中捕獲其當前值，並將該新變量傳遞給事件處理程序。