如何獲取點擊的座標？

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。