javascript - js动画图像

Question

我在 Canvas 上有 2 个图像，我想让 imageObg 制作动画。实际上我希望它向右进行线性移动。我找到了一种对矩形等对象进行动画处理的方法，但我无法对从其他来源使用的图像对象进行动画处理。

无论如何，我能做到吗？有谁知道吗？

 window.onload = function() {

   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');
   var imageObj = new Image();
   var imageObj2 = new Image();

   imageObj.onload = function() {
     context.drawImage(imageObj, 69, 130);
   };

   imageObj2.onload = function() {
     context.drawImage(imageObj2, 0, 0);
   };


   imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
   imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'

 };

 body {
   background-color: black
 }

<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
  <canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
    Your browser does not support HTML5 Canvas.
  </canvas>
</div>

Answer 1

只有两件事。

1. 使用 setInterval 设置定期渲染例程.
2. 设置一个移动(或物理)例程，在每次渲染后调用它。

window.onload = function() {

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  var imageObj2 = new Image();

  imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
  imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'

  window.setInterval(renderFrame, 50);

  var ship = {
    x: 69,
    y: 130
  };

  function renderFrame() {

    moveShip();

    context.clearRect(0, 0, canvas.width, canvas.height);
    if (imageObj.complete) {
      context.drawImage(imageObj2, 0, 0);
    }
    if (imageObj.complete) {
      context.drawImage(imageObj, ship.x, ship.y);
    }
  }

  function moveShip() {
    ship.x += 20;
    if (ship.x > canvas.width) {
      ship.x = 0 - imageObj.width;
      ship.y = Math.random() * 250 + 50;
    }

  }

};

body {
  background-color: black
}

<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
  <canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
    Your browser does not support HTML5 Canvas.
  </canvas>
</div>