動畫圖像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。