如何获取点击的坐标？

Question

我与<canvas>标签玩，正好遇到一个问题：

https://jsfiddle.net/awguo/6yLqa5hz/

我希望得到一个点的坐标，当我点击画布上。

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

为什么？

我该怎么做300x300？

Answer 1

您必须调整由事件处理程序返回的event.clientX和event.clientY坐标，以canvas元素与窗口的偏移量为准。为此，您可以使用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 
} 

Answer 2

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

足够工作。你的形象是350px大，不是300px。