0

キャンバス用の単純な描画画像がありますが、最初のフレームに表示されません。

それは私を怒らせている私はそれがなぜそれをしないのかわからない!!

これは私のスクリプトです：

img = new Image();
img.src = 'images/0.png'; //preLoad the image


window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback,  element){
            window.setTimeout(callback, 1000 / 60);
          };
})(); //frames per second


function gameUpdate(){ 
    previous = 0;
    requestAnimFrame( gameUpdate ); 
    draw(); 
}

次に、draw()関数には次のようになります。

//doesn't display on first fame
canvas['canvas1'].ctx.drawImage(img, 100, 150); 

//displays on first frame           
canvas['canvas1'].ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
canvas['canvas1'].ctx.fillRect (30, 30, 55, 50);

FillRectは正常に機能しますが、最初のフレームのdrawImageは機能しません。これがなぜそうなるのか、何か考えはありますか？

4

1 に答える 1

2

関数のrequestAnimFrame 外部を呼び出してアニメーションループを開始する必要があると思いますgameUpdate

requestAnimFrame(gameUpdate)

また、画像が実際に読み込まれていることを確認する必要がある場合もあります

var img = new Image();
img.onload = function() {
    // do the draw image here
}
img.src = 'images/0.png'; //preLoad the image
于 2012-12-05T20:34:26.033 に答える