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

最新推荐文章于 2024-07-24 17:35:07 发布

dxylilac

最新推荐文章于 2024-07-24 17:35:07 发布

阅读量1.4w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u010484625/article/details/46047695

本文介绍如何使用HTML5 Canvas API实现在鼠标移动时绘制跟随鼠标位置的动态红色圆圈，涉及鼠标位置获取、坐标计算及边界调整等关键技术。

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

html代码如下：

<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>  
<script type="text/javascript" src="main.js"></script>  
</div>  
</body>  
</html>

其中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