如何获得点点的坐标？
如何获得点点的坐标？
提问于 2016-10-05 14:37:02
我正在玩<canvas>标签，只是遇到了一个问题：
https://jsfiddle.net/awguo/6yLqa5hz/
当我点击画布时，我想得到点的坐标。
我搜索了一段时间，发现了一些函数，但作为一个300x300画布，其右下角的点是(300,150)。不应该是300,300 (因为img是300x300，画布在上面是100% )？
为什么？
我该怎么做才能拿到300x300
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-10-06 04:04:37
您必须通过画布元素对窗口的偏移量来调整事件处理程序返回的event.clientX和event.clientY坐标。要做到这一点，可以使用canvas.getBoundingClientRect获取left & top画布偏移量。一定要注意resize & scroll事件。当这些事件发生时，您必须重新获取画布的当前偏移量。
// Fetch offsetX & offsetY variables that contain the
// canvas offset versus the window
// Re-fetch when the window is resized or scrolled
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }下面是如何使用偏移量计算事件处理程序中正确的鼠标坐标：
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// calculate the mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// your stuff
}Stack Overflow用户
发布于 2016-10-05 15:02:50
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX,
y: evt.clientY
};
}就足够工作了。你的图像是350 is，而不是300 is。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39876926
复制相关文章
相似问题
腾讯云开发者
