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

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(); 

先把画布的位置，这会给你属性的对象上，右，下，左。因此，要计算相对于左上角的光标坐标，只需从客户端X和客户端Y的左上角X和Y坐标中减去该坐标。

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