Comment passer le nom de la propriété de l'objet à drawImage?

Question

J'ai besoin de transmettre des noms de propriété de cet objet appelé source

Object { 
    one: "img/20160602_112823_001.jpg", 
    two: "img/UHEGP 17.1.jpg", 
    three: "img/UHEGP 17.3.jpg", 
    badge: "img/badge-gold-big-no-shadow-tilted.png", 
    top_layer: "img/watermark_bronze_GOLD_Final-70-opacity.png" 
} 

à drawImage fonction.

function loadImages(source, callback) { 
var images = {}; 
var loadedImages = 0; 
var numImages = 0; 
// get num of sources 
for (var src in source) { 
    numImages++; 
} 
for (var src in source) { 
    images[src] = new Image(); 
    images[src].onload = function() { 
     if (++loadedImages >= numImages) { 
      callback(images); 
     } 
    }; 
    images[src].src = source[src]; 
} 
} 

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

loadImages(source, function (images) { 
for (var key in source) { 

    context.drawImage(images.key, 0, 0, 921, 680); 
    context.drawImage(images.top_layer, 0, 0, 921, 57); 
    context.drawImage(images.badge, 700, -20, 175, 175); 
} 
}); 

Il fonctionne si je viens de mettre là le nom de la propriété sans impliquer la boucle:

context.drawImage(images.top_layer, 0, 0, 921, 57); 

Mais cela ne si j'essaie de le faire à travers la boucle et mettre tous les noms de propriété à l'intérieur key variable. Quand je le passe à context.drawImage(images.key, 0, 0, 921, 680); cela ne fonctionne pas.

Answer 1

Utilisez

var temp = images[key]; 

au lieu de

var temp = images.key;