javascript - 如何获取光标的相对坐标？

Question

我有一个画布。当按下左键时，我需要获取光标相对于画布左上角的坐标。但是 Javascript 给我的只是clientX,clientY和. 我试图计算这个。但是画布没有, ,或可用。screenXscreenYclientXclientYscreenXscreenY

Answer 1

假设你有你的画布

<canvas id="myCanvas"></canvas>

您可以首先使用获取 Canvas 的位置

var element = document.getElementById('myCanvas');
var rect = element.getBoundingClientRect();

这将为您提供一个具有以下属性的对象：顶部、右侧、底部和左侧。因此，要计算光标相对于左上角的坐标，只需从 clientX 和 clientY 的左上角 X 和 Y 坐标中减去该坐标。

var canvasCursor = { top: clientY - rect.top,
                    left: clientX - rect.left }