javascript - 获取 Canvas 鼠标在 Canvas 上的位置

Question

** 在标记为重复之前先阅读! **

获取鼠标在 Canvas 上的位置几乎可以正常工作。

我的窗口大小是800 x 600

我的 Canvas 尺寸是400 x 300:

canvas.width = 400;
canvas.height = 300;

我的 Canvas css 大小为 100% x 100%:

canvas {width: 100vw; height: 100vh;}

问题是:如果我的鼠标位于 Canvas 中间，我会得到以下鼠标位置:400, 300。如果我的窗口大小是 1600 x 1200，我会得到 800, 600。

我想获取鼠标的 Canvas 位置。我的意思是，无论窗口大小如何，我都希望获得 200, 150。

我该怎么做？感谢您的帮助。

Answer 1

您必须创建模型坐标与屏幕坐标之间的转换。这是很好的解释:http://www.ckollars.org/canvas-two-coordinate-scales.html