0

只是为了在画布上绘制图像，我很想逐帧制作动画，但到目前为止，我的谷歌还没有任何结果，或者答案相当模糊。这是代码。我的 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);

它不必是全局的——只是不要把它放在你每秒调用 60 次的函数中。

2）你不能用图像做到这一点。图片需要100%下载才能使用。
您拥有的功能将在几 1/1000 秒内完成。这甚至没有足够的时间开始下载您的图像。

因此，为您的图像制作一个加载系统，当它们全部加载时，然后开始您的画布动画。

3）在管理图像绘制方面，要么你要在每帧图片之间切换，要么你要使用图片图集，并切换坐标以指向正确的部分（如动画条，或纹理贴图）。

4) 要循环，您将使用window.requestAnimationFrame（当前为“webkitRequestAnimationFrame”、mozRequest...、msRequest...）或 setTimeout。

于 2012-10-09T06:43:08.717 回答