Javascript Canvas Element - tableau d'images

Question

Je suis juste en train d'apprendre JS, en essayant de faire des choses sans jQuery, et je veux faire quelque chose de similaire à this mais je veux utiliser un tableau d'images au lieu d'un seul.

Mon tableau d'image est formée comme celui-ci

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

Et l'élément de toile est écrit comme ça. (Quasiment entièrement pris sur le site 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); 
      } 
     } 
     } 
    } 

Il utilise l'image « sample.png » dans ce code, mais je veux changer pour afficher une image à partir du tableau. Afficher un autre à chaque fois qu'il boucle.

Apoligies si je ne l'ai pas bien expliqué.

Answer 1

Juste itérer sur le tableau, et positionner les images en utilisant ses propriétés largeur et hauteur:

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

Vérifiez this exemple.