鼠标在画布上的运动图像的中心

Question

我正在为学校做一个明星捕捉游戏。 我希望环境能够动态地改变，这样当我调整浏览器窗口大小时，游戏会随之调整大小。

我得到了以下运行代码： http ： //jsfiddle.net/xigolle/yA74f/

唯一的问题是鼠标不是女巫的中心。 在每种尺寸上将鼠标放在中心的最佳方法是什么？

问题在这一部分确定：

 ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);

我从调整大小时激活的事件监听器获取的浏览器窗口的大小。

值放在canvas.width和canvas.height中。

我希望你们能帮助我:)

如有任何疑问或不透露请问:)

Answer 1

你有两个问题

首先是你使用drawImage

ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);

这将以不保持比例的方式重新调整女巫形象，这就是为什么在调整窗口大小时女巫要么躲避也要扩大

您应该根据原始图像大小和原始画布大小的比例调整图像大小。 然后使用该比率乘以新的画布大小以获得正确的图像大小。

//Original canvas width/height
var initialWidth = 500, initialHeight = 500;
var initialImgWidth = 120, initialImgHeight = 65;
var wRatio =  initialImgWidth/initialWidth, hRatio = initialImgHeight/initialHeight;
...
ctx.drawImage(img, this.x, this.y, canvas.width*wRatio, canvas.height*hRatio);

现在我们已经解析了图像调整大小现在我们可以将图像居中放在鼠标中心现在要居中，您必须分别使用鼠标x / y和减去每个重新调整的女巫的宽度/高度的1/2

Witch.x = event.pageX-((canvas.width*wRatio)/2);
Witch.y = event.pageY-((canvas.height*hRatio)/2);

的jsfiddle

编辑

我的重新缩放计算是错误的，现在要缩放图像，现在只需按原始尺寸进行缩放

var imgWScale = initialImgWidth/2;
var imgHScale = initialImgHeight/2;
...
ctx.drawImage(img, this.x, this.y, imgWScale,imgHScale);
...
Witch.x = event.pageX-(imgWScale/2);
Witch.y = event.pageY-(imgHScale/2);

只记得中心只是获取图像宽度/高度并分成两半，然后从鼠标坐标中取出。