clientX 和 clientY 相对于实际坐标的偏移

Question

我不明白为什么 clientX 和 clientY 属性偏移到它们的实际位置。这是我的代码：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
   <p>The mouse is at</p><p id="mousecoords"> "hello" </p>
   <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
   <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var coords = document.getElementById("mousecoords");
    c.onmousemove = function(event){
      
      var x = event.clientX;
      var y = event.clientY;
      coords.innerHTML= x + "," + y;
      ctx.beginPath();
      ctx.arc(x, y, 2, 0, Math.PI * 2, true);
      ctx.fill();
    };
    </script> 
  </body>
</html>

这是问题的屏幕截图。有任何想法吗？

Answer 1

.clientX并.clientY相对于“客户区”（您当前正在查看的页面部分）提供。您需要进行调整以考虑画布元素相对于客户区域的位置。幸运的是，您还可以提供.getBoundingClientRect()元素在客户区域坐标中的位置和尺寸。

将它们放在一起，您可以修改.onmousemove代码，如下所示：

  var bounding = c.getBoundingClientRect();
  var x = event.clientX - bounding.left;
  var y = event.clientY - bounding.top;