javascript - Canvas ，如何考虑鼠标事件的纵横比？

Question

我在这里看到了一些相关的帖子，但据我所知，没有真正适合我的用例。

我一直在读this post关于如何制作响应式 Canvas 游戏并遵循步骤 1 和 2 中的逻辑并使用以下方法将我的 Canvas 放置在屏幕中央:

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

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

div 包含在我的 Javascript 中创建的 Canvas 。

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

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

根据拉伸(stretch)的 Canvas 大小，似乎有大约 5-20 像素的差异。

提前谢谢你，我希望这是有道理的。

Answer 1

您可以使用 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);
})

示例:https://jsfiddle.net/tzi/2cj8n8xt/