如何获取相对于画布元素的鼠标坐标？

获取相对于画布元素的鼠标坐标

为了创建一个简单的基于画布的绘画应用程序，一个常见的挑战是确定鼠标在画布上的位置。

解决方案

解决此问题的一种方法是利用 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. 当鼠标点击元素 clickme，触发 onclick 事件处理程序。
2. getBoundingClientRect() 方法检索元素相对于视口的位置和大小。
3. e.clientX 和 e.clientY属性表示鼠标在视口内的绝对位置。
4. 通过从这些绝对坐标中减去 rect.left 和 rect.top，我们获得鼠标相对于元素左上角的位置。

以上是如何获取相对于画布元素的鼠标坐标？的详细内容。更多信息请关注PHP中文网其他相关文章！