用畫布逐個圖片動畫

Question

僅用於在畫布上繪制圖像，我很想制作逐幀動畫，但是到目前為止，我的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張圖片中的一部​​分，我想知道如何制作然后在畫布上閱讀，因為它是常規的逐幀動畫，任何想法。

Answer 1

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);

它不必是全局的，只是不要將其放在您每秒調用60次的函數中。

2）您無法使用圖片來做到這一點。 圖片必須先100％下載，然后才能使用。
您擁有的功能將在幾分之一秒的時間內移動。 甚至還沒有足夠的時間開始下載圖像。

所以，做一個裝載系統為你的形象，當他們都加載， 然后開始你的畫布動畫。

3）在管理圖片繪制方面，您要么要在每幀圖片之間切換，要么要使用圖片集，然后將坐標切換為指向適當的部分（例如動畫條或紋理圖）。

4）循環播放，您將使用window.requestAnimationFrame （當前為“ webkitRequestAnimationFrame”，mozRequest ...，msRequest ...）或setTimeout。