Javascript clientX和clientY从reall坐标偏移_Javascript_Html_Onmousemove

Javascript clientX和clientY从reall坐标偏移

javascript html

Javascript clientX和clientY从reall坐标偏移,javascript,html,onmousemove,Javascript,Html,Onmousemove,我不明白为什么clientX和clientY属性会偏移到它们的实际位置。这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-

我不明白为什么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>


你好，世界！
鼠标位于“你好”
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var coords=document.getElementById（“mousecoords”）；
c、 onmousemove=函数（事件）{
var x=event.clientX；
var y=event.clientY；
coords.innerHTML=x+“，”+y；
ctx.beginPath（）；
弧（x，y，2，0，Math.PI*2，真）；
ctx.fill（）；
};

以下是该问题的截图。有什么想法吗？试试这个：

函数getMousePos（画布，e）{ var rect=canvas.getBoundingClientRect（）；返回{ x:e.clientX-右左， y:e.clientY-rect.top }; } var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）； var coords=document.getElementById（“mousecoords”）； c、 onmousemove=函数（e）{ 变量{ x,， Y }=getMousePos（c，e）； coords.innerHTML=x+“，”+y； ctx.beginPath（）；弧（x，y，2，0，Math.PI*2，真）； ctx.fill（）； };

鼠标位于
“你好”

试试这个：

鼠标位于
“你好”

和是相对于“客户端区域”（您当前正在查看的页面部分）提供的。您需要进行调整，以考虑画布元素相对于客户机区域的位置。幸运的是，还提供了一个在客户端区域坐标中提供元素位置和尺寸的工具

将这些放在一起，您可以修改

.onmousemove

代码，如下所示：

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

和是相对于“客户端区域”提供的，客户端区域是您当前查看的页面部分。您需要进行调整，以考虑画布元素相对于客户机区域的位置。幸运的是，还提供了一个在客户端区域坐标中提供元素位置和尺寸的工具

将这些放在一起，您可以修改

.onmousemove

代码，如下所示：

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