javascript - 如何在 Canvas 上移动图像？

Question

我有一个简单的射击 Canvas 游戏，运行得很好。但我的问题是我想要图像进行拍摄而不是蓝色矩形？那么我怎样才能让我的图像移动并拍摄掉下来的橙色矩形呢？

这是我的代码:

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

现在您只需要在渲染函数中的新位置重绘图像...因此不要使用固定位置 20,20，而是使用基于变量的位置:

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