html获取鼠标在页面的坐标以及在canvas上的坐标

来源：互联网发布：数据可视化常用工具编辑：程序博客网时间：2024/05/29 13:22

以下程序实现了在canvas上画红色的圆，圆心为鼠标所在位置，其中圆的位置随着鼠标位置的移动而移动，js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标，getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标；canvas以其左上角为起点，并设为(0,0)，因此当页面包含其他元素的时候，两者坐标不一致，不过在本例中两者坐标是一致的，因为页面只包含一个canvas元素：

html代码如下：

<html><head></head><body><div onmousemove="draw(event)" id="testcanvas"><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >Your browser does not support the canvas element.</canvas><script type="text/javascript" src="abc.js"></script></div></body></html>

其中abc.js文件中的代码如下：

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 getCanvasPos(canvas,e){//获取鼠标在canvas上的坐标var rect = canvas.getBoundingClientRect(); return {      x: e.clientX - rect.left * (canvas.width / rect.width),     y: e.clientY - rect.top * (canvas.height / rect.height)   };}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();}

0 0