Question

我在画布上有2个图像，我想让imageObg进行动画制作。实际上我希望它向右移动。我找到了一种方法来像一个矩形动画一个对象，但我不能动画我从另一个源使用的图像对象。

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

＆＃13;

 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'

 };

＆＃13;

 body {
   background-color: black
 }

＆＃13;

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

＆＃13;

Answer 1

只有两件事。

使用setInterval设置定期渲染例程。
设置移动（或物理）例程，在每次渲染后调用它。

＆＃13;

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

＆＃13;

body {
  background-color: black
}

＆＃13;

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

＆＃13;

Answer 2

只需使用setInterval命令增加图像的x位置。

var img = document.createElement("IMG");
var img.src = [Image Source];

var x = 0;
window.setInterval(function() {
  x ++;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(img, x, 0);
}, 50);

希望这有帮助。

修改

这是JSFiddle Example。

动画图像js

2 个答案: