画像の 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);