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。

画布动画 - 逐帧

1 个答案: