Javascript 画布动画-逐帧

它不起作用：

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();
    }    
}

var ctx=document.getElementById（“mycanvas”）.getContext（“2d”）；
var image=新图像（）；
var firtImg=1；
var lastImg=75；
window.requestAnimFrame=（函数（回调）
{
return window.requestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame||
函数（回调）
{
设置超时（回调，1000/60）；
};
}
)();
函数绘图（）{
//在这里循环加载系统
如果（第一个img<最后一个img）{
image.src='iglesiafls'+（firstImg++）+'.png'；
ctx.drawImage（图像，0,0550800,0,0550800）；
画框（画）；
render（）；
}    
}

---

我正在尝试使用画布实现75幅图像的逐帧动画。

这可能是时间问题——特别是，当您尝试在此处使用图像时，可能无法加载图像：

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

要画一个圆（或任何东西）并验证动画调用是否正常工作？或者，如果您可以访问javascript调试器，设置断点

---

这里有一个工作——你有一个可能没有帮助的输入错误：firstImg vs firtImg。

你的函数render真的存在吗？嗨，伙计，谢谢，但我不能这样做，我只是用你的代码复制并粘贴在页面上，什么都没有发生。draw函数被调用了吗？弹出警报（“抽签”）；在那里，看看这是一个画布绘制问题还是一个与动画请求。另外，小提琴在你的浏览器中工作吗？小提琴在我的浏览器中工作，但当我将代码放入任何页面时，它根本不工作。我使用的是dreamweaver，我只是在做一个HTML5页面……但没有任何效果。

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