js获取鼠标在canvas上实时移动的坐标点 -六月初技术站

js获取鼠标在canvas上实时移动的坐标点

六月初 JavaScipt 2023-08-15 10:25:23

canvas作为HTML5新增的画布标签，因其强大的功能效果和浏览器的逐步支持而大受欢迎。

本文介绍当鼠标在canvas上移动时如何实时获取到相对于画布的坐标点信息。

这里就涉及到鼠标的事件：onmousemove、onmouseout

onmousemove：事件会在鼠标指针移动到指定的对象上时发生。

onmouseout：事件会在鼠标指针移出指定的对象时发生。

本文案例中使用到的鼠标事件为onmousemove，即鼠标移动事件。通过对鼠标移动事件的监听，实时获取鼠标移动时的参数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="cvs" style="width: 200px;height: 100px; margin-left: 100px; border: 1px solid #f00;"></canvas>
		<script>
			var cvs = document.getElementById('cvs');
			cvs.onmousemove = function (e) {
				console.log(e)
				console.log('X:',e.offsetX)
				console.log('Y:',e.offsetY)
			};
		</script>
	</body>
</html>