次のコードは、ボタンをクリックしたときにグリッドに画像を表示する必要があります。問題は、画像を表示するためにボタンを 2 回クリックする必要があることです。画像が表示されない場合でも、両方の関数呼び出しでログ出力を取得します。どうしたの?
編集: Chrome 開発者ツールが開いているときにのみ問題が発生することがわかったので、javascript の問題ではありません。
EDIT2:受け入れられた回答に加えて、このリンクが役に立ちました: Javascript Canvas Element - Array Of Images
<html>
<head>
<title>Canvas Test</title>
<script>
function init() {
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
images = new Array();
}
function drawImage() {
for (var i = 0; i < 12; i++) {
for (var j = 0; j < 12; j++) {
var index = i*12 + j;
images[index] = new Image();
images[index].src = 'image.jpg';
images[index].onload = function(image, index, i, j) {
console.log(index);
context.drawImage(image, i * 20, j * 20, 20, 20);
console.log("Loading image: " + image.src);
} (images[index], index, i, j);
}
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="300px" height="300px" style="border: solid;"></canvas>
<button onclick="drawImage();">Display Image</button>
</body>
</html>