4

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.png、left_hnd_3.png、left_hnd_4.png。1つの画像を使用したと思いますが、フレームの違いが大きすぎて、1つの画像で実行できません。必要な時差でこれをアニメーション化するにはどうすればよいですか。

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

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つしかない場合は、「テクスチャアトラス」に4つすべてを含む単一の巨大な画像を作成し、setTimeoutまたはsetIntervalを使用してさまざまなパラメータで呼び出しdrawImage()、画像のさまざまなサブセットをキャンバスに描画します。

于 2011-01-24T17:27:13.693 に答える
0

これは私にも役立ちました！何らかの理由で、OPのオープニングコードを使用したときに機能しませんでした。function draw(){

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

于 2011-09-12T07:25:09.680 に答える