如何将对象的属性名称传递给drawImage？

Question

我需要传递这个名为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 函数。

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

如果我只放属性名而不涉及循环，它就可以工作：

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

但是，如果我尝试通过循环执行此操作并将所有属性名称放入 key 变量中，则不会。当我将它传递给context.drawImage(images.key, 0, 0, 921, 680); 时，它不起作用。

Answer 1

使用

  var temp = images[key];

而不是

   var temp = images.key;