0

動いていない：

var ctx=document.getElementById("mycanvas").getContext('2d');
var image = new Image();
var firtImg=1;
var lastImg=75;

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


function draw(){
    //loop here for loading system
    if(firstImg< lastImg){
        image.src = 'iglesiafls'+(firstImg++)+'.png';
        ctx.drawImage(image,0,0,550,800,0,0,550,800);
        requestAnimFrame(draw);
        render();
    }    
}

キャンバスを使用して、75 枚の画像のフレームごとのアニメーションを実現しようとしています。

4

1 に答える 1

1

タイミングの問題である可能性があります。具体的には、ここで画像を使用しようとすると、画像が読み込まれない場合があります。

if(firstImg< lastImg){
    image.src = 'iglesiafls'+(firstImg++)+'.png';
    ctx.drawImage(image,0,0,550,800,0,0,550,800);
    requestAnimFrame(draw);
    render();
}

それらがロードされていない場合、drawImage の呼び出しは失敗します。drawImage 呼び出しを次のようなものに置き換えてみましたか:

ctx.arc( 200, 400, firstImg*10, 0, Math.PI * 2, 0 );

円 (または何でも) を描画し、アニメーション呼び出しが機能していることを確認するには? または、JavaScript デバッガーにアクセスできる場合は、ブレークポイントを設定しますか?

ここに動作中のjsFiddleがあります。タイプミスがありましたが、おそらく役に立たないでしょう: firstImg と firtImg です。

于 2012-10-09T16:40:35.593 に答える