如何獲取遊標的相對座標？

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 }