如何取得相對於畫布元素的滑鼠座標？

獲取相對於畫布元素的鼠標坐標

為了創建一個簡單的基於畫布的繪畫應用程序，一個常見的挑戰是確定滑鼠在畫布上的位置。

解

解決此問題的一種方法是利用 BoundingClientRect 屬性。這可以如下實現：

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  console.log("Left: " + x + " ; Top: " + y + ".");
};</code>

範例

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

說明

1. 說明
3. 當老鼠
當滑鼠getBoundingClientRect() 方法會擷取元素相對於視窗的位置和大小。

e.clientX 和 e.clientY屬性表示滑鼠在視窗內的絕對位置。 透過從這些絕對座標中減去 rect.left 和 rect.top，我們得到滑鼠相對於元素左上角的位置。

以上是如何取得相對於畫布元素的滑鼠座標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！