带有画布的HTML5中的逐帧动画

Question

我有一个flash动画我试图转换为HTML5.现在我已经取出了所有的图像.例如,在手动画中,我拍摄了所有手部图像.我用基础绘图制作了画布,但我不知道如何逐帧替换这些图像.

function draw(){
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        // canvas animation code here:
        var ctx = canvas.getContext('2d');

        var lhs = new Image();

        lhs.src = "images/left_hnd_1.png";

        lhs.onload = function(){
            ctx.drawImage(lhs, 293, 137);
        }

    } else {
        // canvas unsupported code here:
        document.getElementById('girl').style.display = "block";
    }
}

现在我有三个这个图像的框架.left_hnd_2.png,left_hnd_3.png&left_hnd_4.png.我会使用一个图像,但帧的差异太大,无法用一个图像完成.如何根据我想要的时差来设置动画.

任何想法将不胜感激.谢谢!

Answer 1

试试这个:

var imgNumber = 1;
var lastImgNumber = 4;

var ctx = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
  ctx.drawImage( img, 0, 0 );
};
var timer = setInterval( function(){
  if (imgNumber>lastImgNumber){
    clearInterval( timer );
  }else{
    img.src = "images/left_hnd_"+( imgNumber++ )+".png";
  }
}, 1000/15 ); //Draw at 15 frames per second

另一种方法是,如果你只有4个图像,那就是在'纹理图集'中创建一个包含所有四个图像的单个巨大图像,然后使用setTimeout或setInterval调用drawImage()不同的参数来将不同的图像子集绘制到画布上.