canvas之鼠标事件

最新推荐文章于 2024-04-11 16:49:28 发布

花开鸟儿来

最新推荐文章于 2024-04-11 16:49:28 发布

阅读量5.1k

点赞数

文章标签： javascript canvas html5

本文链接：https://blog.csdn.net/huoer_12/article/details/40025221

版权

canvas的鼠标事件无法直接获取鼠标在canvas上的坐标，所获得的坐标是相对于整个屏幕的坐标，所以，想得到鼠标在canvas上的坐标时，就必须进行转换。

使用getBoundingClientRect方法，得到canvas在屏幕上的位置及大小信息：

ClientRect {height: 300, width: 1350, left: 8, bottom: 486, right: 1358…}
bottom: 486
height: 300
left: 8
right: 1358
top: 186
width: 1350
__proto__: ClientRect

通过当前鼠标的坐标和ClientRect的信息对比，得出鼠标在canvas上的位置：

function getPointOnCanvas(canvas, x, y) { 
			var bbox =canvas.getBoundingClientRect(); 
			return { x: Math.round((x- bbox.left )*(canvas.width / bbox.width)), 
					 y: Math.round((y - bbox.top) * (canvas.height / bbox.height)) 
			}; 
		}

demo的源代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
	
</style>
</head>
<body>
<p>演示canvas的鼠标事件</p>
<p>Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个屏幕的坐标</p>
<p id="m">MOVE 鼠标坐标:</p>
<p id="d">DOWN 鼠标坐标:</p>
<p id="u">UP 鼠标坐标:</p>
<canvas id="canvas" width="100%" height="300px" style="width: 100%;height: 300px;"></canvas>
<script type="text/javascript">
	window.onload = function(){
		var c = document.getElementById("canvas");
		var m =document.getElementById("m");
		var d =document.getElementById("d");
		var u =document.getElementById("u");
		
		var ctx = c.getContext("2d");
		c.width = window.innerWidth;
		ctx.beginPath();
		//画出canvas的边框
		ctx.rect(0,0,c.width,300);
		ctx.stroke();
		//画一条线
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(1366,300);
		ctx.lineWidth = 1;
		ctx.strokeStyle = "red";
		ctx.stroke();
		//添加监听
		c.addEventListener("mousemove",move,false);
		c.addEventListener("mousedown",down,false);
		c.addEventListener("mouseup",up,false);
		
		
		function move(e){
			m.textContent = "MOVE 鼠标坐标：" + e.pageX + "," + e.pageY + " --canvas坐标：" + getPointOnCanvas(c,e.pageX,e.pageY).x + "," + getPointOnCanvas(c,e.pageX,e.pageY).y;
		}
		function down(e){
			d.textContent = "DOWN 鼠标坐标：" + e.pageX + "," + e.pageY;
		}
		function up(e){
			u.textContent = "UP 鼠标坐标：" + e.pageX + "," + e.pageY;
		}
		function getPointOnCanvas(canvas, x, y) { 
			var bbox =canvas.getBoundingClientRect(); 
			return { x: Math.round((x- bbox.left )*(canvas.width / bbox.width)), 
					 y: Math.round((y - bbox.top) * (canvas.height / bbox.height)) 
			}; 
		} 
	}
	
</script>
</body>
</html>

效果图如：