0

如何使这样的事情起作用？我真的是编程新手，不知道如何让我的库存可见？

收到此错误： 未捕获的类型错误：无法读取未定义图像的属性“img”。（匿名函数）.onload

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

var image = {};

function loadImage(name) {
    image[name] = new Image();
    image[name].onload = function () {
        //resourceLoaded();
    };
    image[name].src = "images/" + name;
}

var items = {
    knife: {
        name: "Knife",
        img: "knife.png"

    },
    sword: {
        name: "Sword",
        img: "sword.png"
    }
};

var inventory = []; //empty inventory

inventory.push(items.knife); //pickup a knife

for (var i = 0, len = inventory.length; i < len; i++) {
    loadImage(inventory[i].img);
    image[inventory[i].img].onload = function() {
            ctx.drawImage(image[inventory[i].img], 0, 0);
    }
}

尝试了很多东西，但无法理解比这更好的东西:(因为我是编程新手

4

2 回答 2

1

JavaScript 中没有块作用域，只有函数作用域。该i变量在您的代码段中的任何地方都是相同的。因此，当加载图像时，i变量的值为2( inventory.length)。

要做你想做的事，你必须引入一个函数作用域。一种方法是这样做：

function createCallback(i) {
    loadImage(inventory[i].img);
    image[inventory[i].img].onload = function() {
        ctx.drawImage(image[inventory[i].img], 0, 0);
    }
}

for (var i = 0, len = inventory.length; i < len; i++) {
    createCallback(i);
}
于 2013-05-11T03:14:11.973 回答
0

你试图在你的 for 循环中做同样的事情两次。也就是说，您应该只loadImage(inventory[i].img)在您的 for 循环中使用 ctx.drawImage 调用到 loadImage() 函数中：

function loadImage(name) {
    image[name] = new Image();
    image[name].onload = function () {
        //resourceLoaded();
        ctx.drawImage(image[name], 0, 0);
    };
    image[name].src = "images/" + name;
}

但是，如果您将更多图像添加到库存数组中，这将在彼此之上绘制图像。

于 2013-05-11T03:25:34.457 回答