0

小さな白い四角形を描画しますが、画像ではなく、なぜこのようになっているのか、どのように修正するのか。

var imageReady = false;
img = new Image(); 
img.src = 'player.png'; 
img.onload = loaded();

function loaded() { 
imageReady = true;
redraw(); 
}

function redraw() {
    //ctx.fillStyle = "blue";
    //ctx.fillRect(0, 0, 500, 500);

    if (imageReady) {
        ctx.fillStyle = "white";
        ctx.fillRect(10,10,10,10);
        ctx.drawImage(img, 5, 5);
    }
}
4

2 に答える 2

1

あなたは に渡っloaded()ていonloadます。パスしてみてくださいimg.onload = loaded。

このように(JSFiddle Here)。

var imageReady = false;
img = new Image(); 
img.onload = loaded;

もう 1 つ、src の前に onload を設定することをお勧めします。ブラウザーが内部でどのようにロードを行うかはわかりませんが、画像のロードが速すぎて、ロード後にオンロードを送信する可能性があります。それは可能ですか？知らない。

編集

はい、値img.onload = loadedを設定する前にコールバックを関連付けることもお勧めしsrcます。テストしたばかりで、イメージがキャッシュにある場合は、onload関連付ける前に を呼び出すことがあります。

于 2013-08-06T22:11:41.460 に答える