Question

我正在使用<canvas>代码并遇到问题：

当我点击画布时，我想得到一个点的坐标。

我搜索了一段时间并发现了一些功能，但作为一个300x300的画布，它的右下角点是（300,150）。不应该是300,300（因为img是300x300而画布是100％）？

为什么？

我应该怎样做才能获得300x300？

Answer 1

您必须通过画布元素与窗口的偏移量调整事件处理程序返回的event.clientX和event.clientY坐标。为此，您可以使用canvas.getBoundingClientRect获取left＆amp; top画布偏移量。一定要听resize＆amp; 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
}

Answer 2

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX,
    y: evt.clientY
  };
}

足够工作了。你的图像是350px大，而不是300px。

如何获取我点击的点的坐标？

2 个答案: