1

次のコードは、ボタンをクリックしたときにグリッドに画像を表示する必要があります。問題は、画像を表示するためにボタンを 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>
4

1 に答える 1

1

実際にあなたのコードは動作します。ただし、画像が読み込まれない場合があり、ボタンを 2 回クリックする必要があります。

ここで試してみてください。

2 つの問題:

  • 初め、
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);

()最後にそれを実行することを意味するため、これは正しい方法で起動します。そのため、2 回クリックする必要があります。

  • 第二に、src最後に来る必要があります。( MDN ) (しかし、実際には問題ではありません)

それを修正するには、すぐに実行されないように関数を作成する必要があります。また、ループ内にあり、スコープ変数を使用するため、特別な注意が必要です。デモのコードを参照してください。

　>固定デモ!<

于 2012-06-08T01:39:16.343 に答える