Javascript 数组中每个对象的画布笔划文本，但只绘制一个图像

我试图在画布上画一个小图像，并为数组中的每个人画一些文本。 我是这样做的

function drawPersonsOnCanvas(canvas, persons) {
    var workIcon = '../images/work.png';
    var partyIcon = '../images/party.png';

    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
// randomizePositions just put every object of array on random position inside canvas
    persons = randomizePositions(persons, width, height);
    for (var i in persons) {
        var person= persons[i];

        person['image'] = new Image();
        person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
        person['image'].onload = function() {
            context.drawImage(person['image'], person['x'], person['y']);
        };
        context.strokeText('person ' + person['status'], person['x'], person['y']);
    }
}

---

我总是把地图上的所有文字都放在正确的位置上，只有一张图片，x和y对所有人来说都是不同的（我有5个人在数组中，我尝试了，但没有加载，但它不起作用）。是否有人知道要更改什么以便为每个人获得一张图片？

在执行每个

onload

时，您的

person

变量已重新分配给persons中的下一个元素

因此，您需要在

onload

中创建一个新的person变量

为此，请为person['image']添加一个指向正确的人的索引

    …
    person['image'].index=i;
    person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
    …

然后在onload中，您可以重新创建正确的人员：

        var person=persons[this.index];

因此，您重新编写的代码看起来像这样…而且是一把小提琴：

---

我不明白你的问题。虽然应该有五幅图像，但是否只显示一幅图像？或者，尽管您希望看到不同的图像，但您是否会得到五倍于相同图像的图像？一张截图会有帮助。@Philipp我需要五张图片，但它只画了一张。文本在好的位置上绘制了五次，也应该有一个带文本的图像，但四个文本缺少图像，只有一个有图像

function drawPersonsOnCanvas(canvas, persons) {

    var workIcon = '../images/work.png';
    var partyIcon = //'../images/party.png';

    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
// randomizePositions just put every object of array on random position inside canvas
    persons = randomizePositions(persons, width, height);
    for (var i in persons) {
        var person= persons[i];
        person['image'] = new Image();
        person['image'].onload = function() {
            var person=persons[this.index];
            context.drawImage(person['image'], person['x'], person['y']);
            context.strokeText('person ' + person['status'], person['x'], person['y']);
        };
        person['image'].index=i;
        person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
    }
}