畫布動畫-逐幀

Question

它不起作用：

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張圖像的逐幀動畫。

Answer 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 vs firtImg。