Рисование большого массива изображений на холсте 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

Это проблема закрытия, не связанная с 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.Это заставляет его записывать текущее значение в новую переменную и передавать эту новую переменную в обработчик событий.