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

我需要通过这个对象的属性名称叫做source如何将对象的属性名称传递给drawImage？

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);时，它不起作用。

来源

2016-07-14 hasan

您的要求不明确，能否请您详细一点 – brk

@ user2181397我编辑它。希望现在很清楚 – hasan

@AmiramKorach但它工作，如果我只是把那里属性名称不涉及循环： 'context.drawImage（images.top_layer，0，0，921，57）;' – hasan

使用

var temp = images[key];

代替

var temp = images.key;

来源

2016-07-14 08:49:47

感谢您的回复。但它不起作用。我编辑后，现在应该更清楚。为什么我不能把它作为'context.drawImage（images.key，0，0，921，680）;'？ – hasan

images.key会在图像对象内寻找'key'，但图像[key]实际上会寻找images.keyValue，它正是你想要的 –

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

回答

相关问题