Javascript畫布元素 - 圖像數組

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」，但我想改變它從數組顯示圖像。每次循環顯示一個不同的。

Apoligies，如果我沒有解釋得很好。

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例子。