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;
}

...全文
291 点赞 收藏 9
写回复
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
引用 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
一般情况画布的像素值和显示在页面上的尺寸一至、就不需要乘以canvas.width/bbox.width了。 乘以canvas.width/bbox.width 是针对于画布的像素值和显示在页面上的尺寸不一至的情况
回复
_Slience_ 2015-08-15
引用 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
回复
天际的海浪 2015-08-15
canvas.width画布的像素值 bbox.width显示在页面上的尺寸 鼠标坐标获取的是显示在页面上的坐标值,这就可能和画布实际的像素不一样了。 所以要用下面的公式 (e.clientX - bbox.left) * (canvas.width/bbox.width);
回复
天际的海浪 2015-08-15
引用 2 楼 u010513756 的回复:
[quote=引用 1 楼 jslang 的回复:] 因为canvas显示在页面上的尺寸可能与画布设置的width和height像素值不一至。
请问为什么乘以canvas.width/bbox.width就一致了能[/quote] 标坐标获取的是显示在页面上的坐标值,这就可能和画布实际的像素不一样了。 所以要用下面的公式 (e.clientX - bbox.left) * (canvas.width/bbox.width);
回复
_Slience_ 2015-08-15
引用 1 楼 jslang 的回复:
因为canvas显示在页面上的尺寸可能与画布设置的width和height像素值不一至。
请问为什么乘以canvas.width/bbox.width就一致了能
回复
天际的海浪 2015-08-15
因为canvas显示在页面上的尺寸可能与画布设置的width和height像素值不一至。
回复
发动态
发帖子
HTML5
创建于2012-11-23

3.7w+

社区成员

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
申请成为版主
社区公告
暂无公告