Jvascript Canvas Element - Array Of Images

Question

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

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

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

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

Просто итерацию по массиву, и положение изображения, используя его ширина и высота свойства:

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); 
    } 
} 

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