0

キャンバスに画像を描画するだけで、フレームごとのアニメーションを作成したいと思っていますが、これまでのところ、Google には結果がないか、答えがかなりあいまいでした。これがコードです。私のJavaScriptの

<script>
      function drawOnCanvas() {
          var firstImg=1;
          var lastImg=75;
        var ctx=document.getElementById("mycanvas").getContext('2d');
        var image=new Image();
        image.src="iglesiafls75.png";
        image.onload=function() {
          ctx.drawImage(image,0,0,550,800,0,0,550,800);
        }
      }

      window.addEventListener('load', drawOnCanvas, true);
    </script>

画像はさらに 75 の一部であり、通常のフレームごとのアニメーションであったため、キャンバスで読み取る方法を知りたいです。アイデアはありません。

4

1 に答える 1

0

1) 関数内でキャンバスを取得しないでください。これは非常に遅くなります。

// instead of
function () {
    var ctx = document.get......;
}

// do this
var ctx = document.getElement...
function draw () { ctx.drawImage(); }

// or
var ctx...
function draw (context) { context.drawImage(); }
draw(ctx);

グローバルである必要はありません。1 秒間に 60 回呼び出す関数内に配置しないでください。

2）画像ではそれを行うことはできません。写真は、使用する前に 100% ダウンロードする必要があります。
あなたが持っている機能は、数千分の1秒で通り過ぎます。画像のダウンロードを開始するのに十分な時間ではありません。

画像の読み込みシステムを作成し、すべての画像が読み込まれたら、キャンバス アニメーションを開始します。

3) 画像描画の管理に関しては、フレームごとに画像を切り替えるか、画像のアトラスを使用して座標を切り替えて適切なセクション (アニメーション ストリップやテクスチャ マップ)。

4) ループするには、window.requestAnimationFrame(現在は "webkitRequestAnimationFrame"、mozRequest...、msRequest...)、または setTimeout を使用します。

于 2012-10-09T06:43:08.717 に答える