架在HTML5帧动画用帆布 [英] Frame by frame animation in HTML5 with canvas

问题描述

我有一个flash动画我想转换为HTML5。现在，我已经采取了所有图像。例如在手的动画，我已采取所有手图像的图像。我与基本绘图画布上，但我不知道如何框架，以取代那些图像帧。

I have a flash animation I am trying to convert to HTML5. Now I have taken out all the images. For example in the hand animation, I have taken images of all hand images. I have made the canvas with the base drawing but I don't know how to replace those images frame by frame.

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。我已经使用了一个图像，但帧的差别是太多为它用一个图像来完成。我怎样才能随着时间的差异我想这个动画

Now I have three more frame for this image. left_hnd_2.png, left_hnd_3.png & left_hnd_4.png. I would've used one image but the difference in frames is way too much for it to be done with one image. How can I animate this with the time differences I want.

任何意见将大大AP preciated。谢谢！

Any ideas would be greatly appreciated. Thanks!

推荐答案

试试这个：

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（）用不同的参数绘制图像的不同子集到画布上。

An alternative, if you only have 4 images, would be to create a single huge image with all four in a 'texture atlas', and then use setTimeout or setInterval to call drawImage() with different parameters to draw different subsets of the image to the canvas.

这篇关于架在HTML5帧动画用帆布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！