0

画像の URL が正しく抽出されていないため、drawImage コマンドで "Uncaught TypeError" が発生したと思います。写真のパスは正しいです (写真のフォルダーは 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);
4

1 に答える 1

0

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);
        }
    });
});
于 2013-08-11T11:19:34.520 に答える