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