4

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

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。我会使用一张图像，但帧数的差异太大了，无法用一张图像完成。我怎样才能用我想要的时差来制作动画。

任何想法将不胜感激。谢谢！

4

2 回答 2

7

尝试这个：

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()不同的参数以将图像的不同子集绘制到画布上。

于 2011-01-24T17:27:13.693 回答
0

这对我也有用！出于某种原因，当我使用 OP 的打开代码时它不起作用：function draw(){

但是，当我使用时：window.onload = function draw() {动画在画布上播放。我还使用了大约 150 张带有 Alpha 通道的 PNG 图像，因此这是将“视频”或创建合成到 iPad/iPhone 的好方法。我确认它确实适用于 iPad iOS 4.3。

于 2011-09-12T07:25:09.680 回答