canvas中获取鼠标的坐标问题

_Slience_ 2015-08-15 03:37:11

var canvas = document.getElementById("canvas");

		var context = canvas.getContext("2d");

		canvas.onmousemove = function(e) {

			var bbox = canvas.getBoundingClientRect();

			var x =  e.clientX - bbox.left * (canvas.width/bbox.width);

			var y = e.clientY - bbox.top * (canvas.height/bbox.height);

			//为什么不是直接e.clientY - bbox.top呢

			document.getElementById("message").innerHTML = "x="+x+", y="+y;

		}

...全文

637 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

陌生的羁绊2014 2015-08-22

打赏
举报

引用 5 楼 u010513756 的回复:

[quote=引用 4 楼 jslang 的回复:] canvas.width画布的像素值 bbox.width显示在页面上的尺寸鼠标坐标获取的是显示在页面上的坐标值，这就可能和画布实际的像素不一样了。所以要用下面的公式 (e.clientX - bbox.left) * (canvas.width/bbox.width);

在我们实际使用中，e.clientX和e.clientY获取的是鼠标在浏览器中的位置，bbox.left则是canvas距离浏览器的左边距，我第一次做这个功能的时候是直接e.clientX - bbox.left，因为鼠标在浏览器中的X坐标减去canvas的左边距就是等于鼠标相对于canvas中的坐标。我不明白为什么还要多乘以canvas.width/bbox.width[/quote] e.clientX是相对于屏幕的坐标，e.pageX是相对于浏览器坐标吧？？

_Slience_ 2015-08-16

打赏
举报

引用 6 楼 jslang 的回复:

一般情况画布的像素值和显示在页面上的尺寸一至、就不需要乘以canvas.width/bbox.width了。乘以canvas.width/bbox.width 是针对于画布的像素值和显示在页面上的尺寸不一至的情况

请问一下“画布的像素值和显示在页面上的尺寸不一至的情况“一般是指什么情况，我想通过缩放浏览器来实现您说的那种情况，但没有实现

天际的海浪 2015-08-16

打赏
举报

引用 7 楼 u010513756 的回复:

[quote=引用 6 楼 jslang 的回复:] 一般情况画布的像素值和显示在页面上的尺寸一至、就不需要乘以canvas.width/bbox.width了。乘以canvas.width/bbox.width 是针对于画布的像素值和显示在页面上的尺寸不一至的情况

请问一下“画布的像素值和显示在页面上的尺寸不一至的情况“一般是指什么情况，我想通过缩放浏览器来实现您说的那种情况，但没有实现[/quote] 如下：布的像素值是100*100 显示在页面上的尺寸是500*500 <canvas id="canvasId" width="100" height="100" style="width: 500px;height: 500px;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasId"); var context = canvas.getContext("2d"); context.fillRect(10,10,80,80); </script>

天际的海浪 2015-08-15