javascript - 将鼠标置于 Canvas 上移动图像的中心

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

这将以不保持比例的方式重新缩放女巫图像，这就是为什么在调整窗口大小时女巫会挤压或膨胀

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

//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);

只需记住居中，获取图像宽度/高度并将其分成两半，然后从鼠标坐标中获取。