clientX和clientY从实坐标偏移

问题描述

我不明白为什么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,Math.PI * 2,true);
      ctx.fill();
    };
    </script> 
  </body>
</html>

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

解决方法

尝试一下：

function getMousePos(canvas,e) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,y: e.clientY - rect.top
  };
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var coords = document.getElementById("mousecoords");

c.onmousemove = function(e) {
  var {
    x,y
  } = getMousePos(c,e);

  coords.innerHTML = x + "," + y;
  ctx.beginPath();
  ctx.arc(x,y,2,Math.PI * 2,true);
  ctx.fill();
};

<p>The mouse is at</p>
<p id="mousecoords"> "hello" </p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

您需要使用画布上的getBoundingClientRect（）API将当前坐标重新调整为相对于父母的位置。

这是完整的文档：

https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect

此API将返回客户区坐标中的位置，因此，如果您仅从事件中减去clientX / Y，就可以完成。

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

将它们放在一起，您可以按照以下方式修改.onmousemove代码：

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

html javascript onmousemove