如何在畫布上移動圖像？

Question

我有一個運行簡單的射擊畫布游戲。 但是我的問題是我希望圖像進行拍攝而不是藍色矩形？ 那么如何使圖像移動並拍攝掉下的橙色矩形呢？

這是我的代碼：

function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
var img = document.getElementById("nave");
var myImage = new Image();
myImage.src = "pic.gif";
ctx.drawImage(myImage,10,10);
var cW = ctx.canvas.width, cH = ctx.canvas.height;

Answer 1

所以看起來您已經有了圖像：

var myImage = new Image();
myImage.src = "pic.gif";

現在，您只需要在render函數中的新位置上重繪圖像...因此，請使用基於變量的位置，而不是使用20,20的固定位置：

ctx.drawImage(myImage, this.x, this.y);