js鼠标移动事件

js鼠标移动事件.md

js鼠标移动事件

		canvas.addEventListener('mousemove', doMouseMove, false);
		function doMouseMove(e) {
			var x = e.clientX;
			var y = e.clientY;
			var p = getPointOnCanvas(canvas, e);

			var box = canvas.getBoundingClientRect()

			var msg = 'clientX:' + x + '<br/>' + 'clientY:' + y + '<br/>'
					+ 'pointX:' + p.x + '<br/>' + 'pointY:' + p.y + '<br/>'
					+ 'boundX:' + box.left + '<br/>' + 'boundY:' + box.top
					+ '<br/>' + 'boundW:' + box.width + '<br/>' + 'boundH:'
					+ box.height + '<br/>';
			$("#msg").html(msg);

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