帆布动画 - 通过框架

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。