0

它不工作：

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 个图像的逐帧动画。

4

1 回答 1

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。

于 2012-10-09T16:40:35.593 回答