Javascript 画布，如何在鼠标事件中考虑纵横比？

我在这里看到了一些相关的帖子，但据我所知，这些帖子确实适合我的用例

我一直在阅读如何制作响应性画布游戏，并遵循步骤1和2中的逻辑，使用以下方法将画布放置在屏幕中央：

<div id='game-screen'></div>

#game-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: transform(-50%, -50%);
}

#游戏屏幕{
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）；
}

div包含在我的Javascript中创建的画布

根据本教程，我的画布宽度和高度与“样式化”的宽度和高度不同。我的画布宽度和高度为1280 x 1024像素

现在的问题是，将鼠标移动事件绑定到画布时，event.pageX和event.pageY变量与缩放的画布不成比例。我已经考虑了左侧和顶部的偏移，但我不确定如何“缩放”鼠标x和y以与画布纵横比相关

根据拉伸画布的大小，似乎有大约5-20px的差异

---

提前感谢您，我希望这是有意义的。

您可以使用

getBoundingClientRect（）

将游戏屏幕位置放入文档中。用减法，你可以得到鼠标的相对位置

var gameScreen = document.getElementById('game-screen');
gameScreen.addEventListener('click', function(event) {
  var gameScreenPosition = gameScreen.getBoundingClientRect();
  var x = event.clientX - gameScreenPosition.left;
  var y = event.clientY - gameScreenPosition.top;
  alert(x + ' ' + y);
})

---

示例：

相关：抱歉，我在搜索中没有找到此内容。不过这确实奏效了，所以非常感谢=）嗨，就像我说的，我考虑到了偏移量，但我感谢你的帮助。我不明白，因为在你的CSS示例中，你的游戏板没有拉伸是的，这是有道理的。很抱歉，再次感谢你的建议。感谢您的帮助！