html5-canvas - 将 Actor 的图像显示为动画

Question

我正在尝试为演员的 4 张图像制作动画，但我看到的只是一张图像，没有其他变化。

function init()
{
i=0;
while(i<ActStandX.length) //ActStandX holds the x locations of actor in a image spritesheet
{
    for(var currentFrame=0;currentFrame<10;currentFrame++)
    {
       ctxBg.clearRect(0,0,800,600); //ctxBg is 2d context  of canvas
       ctxBg.drawImage(img,ActStandX[i],10,actWidth,actHeight,200,300,60,110);
            }
    i++;
}
requestAnimFrame(init); 
}

到目前为止，我已经尝试过这段代码，但没有成功。

Answer 1

尝试这个：

var i = 0;

function init()
{
    ctxBg.clearRect(0,0,800,600);
    ctxBg.drawImage(img,ActStandX[i++],10,actWidth,actHeight,200,300,60,110);

    if (i == ActStandX.length) i = 0; // loop the animation

    requestAnimFrame(init); 
}

请注意，每次绘制时它都会更改帧，因此它可能比您实际想要的要快。根据经过的时间来限制增量并不难i，我相信你可以弄清楚。:)