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

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

html代码如下：

  

	
  
  
  
  
Your browser does not support the canvas element.  
  
  
  
  
 

其中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 getStyles(obj){//兼容FF，IE10; IE9及以下未测试
		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();  
	}

其中，在获取cavas边框的时候，有以下3种方法：

方法1: canvas.style.borderWidth

该方法只能适用于写在html行内的样式；

方法2: document.defaultView.getComputedStyle(obj)

该方法适用于FF，以及IE10

方法3: obj.currentStyle

适用于IE