0

重複の可能性:
canvas drawImage は初めて画像を描画しません

ゲームを作成した Web アプリケーションを作成しました。ゲームは最初のロードでは動作しません。ページを更新したときにのみ実行され、mozilla または chrome では再び開始されます (つまり、正常です)。コードは次のとおりです。

 <!DOCTYPE html>

 <html>
 <head>

<script>

function init() {

img=new Image();
img.src= "Device-Android.png";
img1= new Image();
img1.src= "background.png";
play=new Image();
play.src="play.png"; 

    canvas1 = document.getElementById('canvas');
//alert("show");        
    if (canvas1 && canvas1.getContext) {
        ctx = canvas1.getContext('2d');

ctx.drawImage(img,0,0,394,726);
ctx.drawImage(img1,37,92,317,477);
ctx.drawImage(play,149,300,70,40);
//alert("show somthing");
ctx.font = "bold 15pt sans-serif";
document.onmousedown = initGame;
    }



}
................ remaining functions

 </script>


</head>

<body onload="init();">

  <center>

   <canvas id="canvas" width="387" height="700">  <h1>Memory Game</h1>   </canvas>

    </center>
    </body>
    </html>
4

1 に答える 1

0

画像を描画しようとしたときに、画像が完全に読み込まれていない可能性があります。onload=init(){image.src="...";} の場合、イメージのロードを開始するのは image.src 呼び出しです。すぐにキャンバスに描画している場合 (数行後)、まだ読み込みが完了していません。ページをリロードすると、最後のページのロードからキャッシュされます。

プリローダーを書きます。または、init() を呼び出す前にこれらのイメージをロードします。

画像の読み込みが完了したかどうかを示す変数があります。image.complete だと思います

于 2012-10-06T03:18:30.150 に答える