如何移动 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);

如何移动 canvas 上的图像？

How to move an image on the canvas?

html

javascript

canvas

html5-canvas