如何获得游标的相对坐标？

Question

我有画布。当按下左键时，我需要相对于画布的左上角获得光标的坐标。但Javascript给我的所有内容都是clientX，clientY，screenX和screenY。我试图计算这个。但是画布没有clientX，clientY，screenX或screenY。

Answer 1

假设你有画布

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

您可以先使用

获取画布的位置

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

那将为您提供一个具有属性的对象：top，right，bottom和left。因此，要计算相对于左上角的光标坐标，只需从clientX和clientY的左上角X和Y坐标中减去该值。

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