获取cavans坐标或者页面鼠标坐标

Posted mzcode

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取cavans坐标或者页面鼠标坐标相关的知识，希望对你有一定的参考价值。

<html> 
<head> 
 <style type="text/css">
body{         
 margin: 0;      
    padding: 0;  
      }  
   .my-canvas{
            margin: 20px;
      border:10px solid #c3c3c3;
       }  
</style>
</head> 
<body>
 <div onmousemove="draw(event)" id="testcanvas">
  <canvas id="myCanvas" class="my-canvas" width="200" height="100" >
 Your browser does not support the canvas element.
</canvas> 
<span id="test"></span>
<script type="text/javascript">
function mousePos(e)   
{//获取鼠标所在位置的坐标，相对于整个页面
     var x,y;     
     var e = e||window.event;     
     return {    
        x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,      
         y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop    
           };  
      }    
      function getStyles(obj){ 
     return document.defaultView.getComputedStyle(obj); }  
     function getCanvasPos(canvas,e)   {
     //获取鼠标在canvas上的坐标     
      var rect = canvas.getBoundingClientRect();     
      var leftB = parseInt(getStyles(canvas).borderLeftWidth);
      //获取的是样式，需要转换为数值    
      var topB = parseInt(getStyles(canvas).borderTopWidth);   
       return {       
         x: (e.clientX - rect.left) - leftB,      
         y: (e.clientY - rect.top) - topB    
         }; 
        }
            function draw(e) 
             {   
                /*var c=document.getElementById("myCanvas");   
                var cxt=c.getContext("2d"); 
                cxt.clearRect(0,0,c.width,c.height); 
                cxt.fillStyle="#FF0000";   
                cxt.beginPath(); 
               cxt.arc(mousePos(e).x,mousePos(e).y,15,0,Math.PI*2,true);   
               cxt.arc(getCanvasPos(c,e).x,getCanvasPos(c,e).y,15,0,Math.PI*2,true);
               cxt.closePath();   
               cxt.fill();  */
               var c=document.getElementById("myCanvas");
                   var s=document.getElementById("test");
                   s.innerText= getCanvasPos(c,e).x+"     "+getCanvasPos(c,e).y;
            }
</script>
</div> 
</body> 
</html>

以上是关于获取cavans坐标或者页面鼠标坐标的主要内容，如果未能解决你的问题，请参考以下文章

js如何获取鼠标在某元素移动时~鼠标指针在元素中的坐标？

js获取鼠标当前的位置

QT中如何获取QTableView当前行的坐标

js怎么获得鼠标当前坐标

js获取元素内鼠标坐标及浏览器兼容

0187 案例：获取鼠标在盒子内的坐标