Question

只是用于在画布上绘制图像，我很想制作逐帧动画，但到目前为止，我的谷歌没有任何结果或答案相当模糊。这是代码。我的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％下载才能使用。
你拥有的功能将在1/1000秒内完成。这还不足以开始下载您的图片。

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

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

4）循环，你将使用window.requestAnimationFrame（目前是“webkitRequestAnimationFrame”，mozRequest ...，msRequest ...）或setTimeout。

用画布的图片动画

1 个答案: