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

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

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

1 个答案: