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」を使用していますが、私は、配列から画像を表示するように変更します。ループするたびに別のものを表示する。

私はこれをうまく説明していない場合は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例。