Question

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

获取此错误： 未捕获的TypeError：无法读取未定义的属性“img” image。（匿名函数）.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);
    }
}

尝试很多东西，但不能比这更好地理解任何东西:(因为我是编程的新手

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

Answer 2

你试图在for循环中做两次同样的事情。也就是说，你的for循环中只应该有loadImage(inventory[i].img)并将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;
}

如果您向库存数组添加更多内容，则会将图像绘制在彼此之上。

如何显示库存中的商品

2 个答案: