使用外部 JSON 文件的属性

Question

我在 drawImage 命令上得到一个“Uncaught TypeError”，因为我认为图片的 url 没有正确提取。图片的路径是正确的（它们的文件夹与 JavaScript 文件在同一文件夹中）。如何引用 JSON 文件中的单个属性？

提前致谢。

这是 JSON：

{
    "characters": [
        {
            "greekName": "Zeus",
            "romanName": "Jupiter/Jove",
            "description": "",
            "picUrl": "pics/zeus.jpg"
        },
        {
            "greekName": "Hera",
            "romanName": "Juno",
            "description": "",
            "picUrl": "pics/hera.jpg"
        },
        {
            "greekName": "Poseidon",
            "romanName": "Neptune",
            "description": "",
            "picUrl": "pics/poseidon.jpg"
        }
    ]
}

相关html：

    <canvas id="slideshow" width="400" height="400"></canvas>

这里是相关的.js代码：

var aImages = [];
canvas = document.getElementById('slideshow');
ctx = canvas.getContext('2d');

 $(document).ready(function () {
    $.getJSON("c.json?callback=?", function (data) {  
        $.each(data.characters, function (i, item) {
            var oImg = new Image();
            oImg.src = item.picUrl;
            aImages.push(oImg);
        }
    );
    });
});

ctx.drawImage(aImages[iCurSlide], 0, 0);

Answer 1

将ctx.drawImage(aImages[iCurSlide], 0, 0); 放在getJSON 回调中。

var aImages = [];
canvas = document.getElementById('slideshow');
ctx = canvas.getContext('2d');

$(document).ready(function () {
    // get json
    $.getJSON("c.json?callback=?", function (data) {  
        $.each(data.characters, function (i, item) {
            var oImg = new Image();
            oImg.src = item.picUrl;
            aImages.push(oImg);
        });
        // aImages is an array with elements
        // go for each element from array, and draw it.
        for (var i in aImages) {
            ctx.drawImage(aImages[i], 0, 0);
        }
    });
});