动画图像js

Question

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

Answer 2

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

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。