在前端开发中，绘制图形需要使用 Canvas 技术。其中，获取鼠标在 Canvas 内的真实坐标是一个常见的问题。本文将介绍如何获取鼠标在 Canvas 中的真实位置，并提供示例代码。
1. 获取 Canvas 的位置
首先，我们需要获取 Canvas 元素相对于屏幕左上角的位置。可以通过以下代码来获取：
----- ------ - ------------------------------------- ----- ---- - ------------------------------- ----- ------- - ---------- ----- ------- - ---------
这里，我们通过 getBoundingClientRect() 方法获取了 Canvas 元素的位置信息，并分别存储在 canvasX 和 canvasY 变量中。这些值的单位是像素。
2. 获取鼠标位置
然后，我们需要获取鼠标在 Canvas 上的位置。一般来说，可以通过以下代码来获取：
----- ------ - -------------- ----- ------ - --------------
但是，这样获取到的坐标是相对于浏览器窗口左上角的位置，而不是相对于 Canvas 左上角的位置。因此，我们需要减去 Canvas 左上角的坐标，才能得到鼠标在 Canvas 中的真实坐标。
3. 计算真实坐标
计算真实坐标的方法如下：
----- ---------- - ------ - -------- ----- ---------- - ------ - --------
在这个示例中，我们从鼠标坐标中减去了 Canvas 的左上角坐标。这样就可以得到鼠标相对于 Canvas 左上角的真实位置。
4. 完整示例代码
下面是一个完整的示例代码：
------- -------------- ----------- ----------------------
--------
----- ------ - -------------------------------------
----- ---- - -------------------------------
----- ------- - ----------
----- ------- - ---------
------------------------------------ --------------- -
----- ------ - --------------
----- ------ - --------------
----- ---------- - ------ - --------
----- ---------- - ------ - --------
----------------- ----- --------- -- ----------- ------------
---
---------在这个示例中，我们首先获取了 Canvas 元素的位置信息，然后添加了一个鼠标移动事件监听器。在事件处理函数中，我们通过计算得到了鼠标相对于 Canvas 左上角的真实位置，并将其打印输出。
5. 总结
通过本文所介绍的方法，我们可以很容易地获取鼠标在 Canvas 中的真实坐标。这对于需要绘制图形的前端开发人员来说非常有用。希望这篇文章能够为你提供帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26097