如何在画布上移动图像？ [英] How to move an image on the canvas?

问题描述

我有这个简单的射击帆布游戏，运行很好。但我的问题是，我想让图像做拍摄，而不是蓝色矩形？ ，所以我怎么能让我的图像移动和拍摄下降的橙色矩形？这是我的代码。请帮忙。非常感谢！

I have this simple shooting canvas game which runs just fine. But my issue is that I want the image to do the shooting and not the blue rectangle? , so how I can make my image move and shoot the orange rectangles that come down? Here's my code. Please help. Thank you so much!

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;

推荐答案

/ p>

So it looks like you already have the image:

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

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

Now you just need to redraw the image at the new position in the render function... so instead of using fixed position of 20,20, use the position based on variables:

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

这篇关于如何在画布上移动图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！