帆布動畫 - 通過框架

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。