キャンバスを使ったHTML5のフレーム別アニメーション

Question

私は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"; 
    } 
} 

ここでは、この画像用にさらに3つのフレームがあります。 left_hnd_2.jpg。私は1つの画像を使用していましたが、フレームの違いは1つの画像で処理するには多すぎます。私はどのように私は私が望む時間差でこれをアニメーション化することができます。

アイデアをいただければ幸いです。ありがとう！

Answer 1

この試してみてください：あなたが唯一の4枚の画像を持っている場合は、「テクスチャアトラス」にすべての4つの単一の巨大な画像を作成し、呼び出すためにsetTimeoutかsetIntervalを使用することであろう、

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 

代替をdrawImage()を使用して、キャンバスにイメージの異なるサブセットを描画します。

Answer 2

これは私にとってもうまくいった！何らかの理由で、私はOPのオープニングコードを使用したときに動作しませんでした：function draw(){

しかし私が使用したとき：window.onload = function draw() {アニメーションはキャンバス上で再生されます。また、約150本のPNG画像をアルファチャンネルで使用していますので、これはiPad/iPhoneに「ビデオ」を作成したり合成物を作成するのに最適な方法です。 iPad iOS 4.3で動作することを確認します。