Javascript Canvas Element - массив изображений

Question

Я только изучаю JS, пытаюсь сделать что-то без jQuery, и я хочу сделать что-то похожее на this , однако я хочу использовать массив изображений вместо одного.

Мой массив изображений сформирован так

var image_array = new Array()
image_array[0] = "image1.jpg" 
image_array[1] = "image2.jpg"

И элемент canvas написан так. (Почти полностью взято с сайта Mozilla)

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      var img = new Image();
      img.src = 'sample.png';
      img.onload = function(){
        for (i=0;i<5;i++){
          for (j=0;j<9;j++){
            ctx.drawImage(img,j*126,i*126,126,126);
          }
        }
      }
    }

Он использует изображение "sample.png" в этом коде, но я хочу изменить его для отображения изображения из массива. Отображение нового каждый раз, когда он зацикливается.

Извинения, если я не объяснил это хорошо.

Answer 1

Просто переберите массив и разместите изображения, используя его свойства width и height:

function draw() {  
  var ctx = document.getElementById('canvas').getContext('2d'),  
      img, i, image_array = [];  

  image_array.push("http://sstatic.net/so/img/logo.png");   
  image_array.push("http://www.google.com/intl/en_ALL/images/logo.gif");  
  // ...  

  for (i = 0; i < image_array.length; i++) {  
    img = new Image();  
    img.src = image_array[i];  
    img.onload = (function(img, i){ // temporary closure to store loop 
      return function () {          // variables reference 
        ctx.drawImage(img,i*img.width,i*img.height);  
      }  
    })(img, i);  
  }  
}  

Проверьте этот пример.