用鼠標在畫布上繪製多邊形：當div包含在網站設計中時的座標問題

Question

我正在使用此腳本"Drawing polygons with the mouse"，它的工作原理非常好。 我遇到的問題是，當我把畫布放在我的網站的設計中。因此畫布現在處於相對位置，座標錯誤。我在我的光標和繪圖之間有一個延遲...

如果我將div設置在位置：fixed，則沒有問題。

的立場聲明如下：

canvas.addEventListener("click", function(e) { 
    var x = e.clientX-canvas.offsetLeft; 
    var y = e.clientY-canvas.offsetTop; 

如何解決這一問題？如何把畫布放在我的設計中並擁有合適的座標？

非常感謝！

Answer 1

試試我的「簡單」鼠標代碼（簡單，因爲它沒有考慮到邊境/填充/ HTML偏移量）：

function getMouse(e, canvas) { 
    var element = canvas, offsetX = 0, offsetY = 0, mx, my; 

    // Compute the total offset 
    if (element.offsetParent !== undefined) { 
    do { 
     offsetX += element.offsetLeft; 
     offsetY += element.offsetTop; 
    } while ((element = element.offsetParent)); 
    } 

    // This isn't the best code because I am not adding padding and border style widths to offset. I'm just keeping it simple. 

    mx = e.pageX - offsetX; 
    my = e.pageY - offsetY; 

    return {x: mx, y: my}; 
}