转载自：https://jingyan.baidu.com/article/c1a3101e5a32b3de656debbd.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>获取鼠标在Canvas中的坐标位置</title> <style> body{text-align: center;} #canvas { border: 1px solid #ccc; width: 300px; height: 300px; overflow: hidden; margin: 0 auto; } </style> </head> <body> <div id="tips"></div> <div id="canvas" onmousemove="get_canvas(event,this)" onclick="test(event);"></div> </body> </html> <script> function get_canvas(ev, obj) { m_clientX = ev.clientX - obj.offsetLeft; m_clientY = ev.clientY - obj.offsetTop; // clientX/Y 鼠标相对当前页面body可视区域左上角的坐标 // offsetLeft/Top 元素左上角相对父元素左上角的距离 document.getElementById("tips").innerHTML = "当前坐标：X：" + m_clientX + " ,Y：" + m_clientY; } </script>