如何從窗口中心的畫布獲取x和y

Question

我試圖在具有自動邊距的div上的畫布上獲取鼠標座標時未成功。我有一個小提琴設置，我希望有人能看到問題是什麼。

如果我刪除了邊距，但邊距與偏移量的尺寸關閉，畫布背後的邏輯是正確的。

http://jsfiddle.net/mcgraw73/Mfafz/

function init() { 
    FGcanvas.addEventListener('mousedown', mouseDown, false); 
    FGcanvas.addEventListener('mouseup', mouseUp, false); 
    FGcanvas.addEventListener('mousemove', mouseMove, false); 
} 

function mouseDown(e) { 
    rect.startX = e.clientX - FGcanvas.offsetLeft 
    rect.startY = e.clientY - FGcanvas.offsetTop; 
    drag = true; 
} 

function mouseUp() { 
    drag = false; 
} 

function mouseMove(e) { 
    if (drag) { 
    rect.w = (e.clientX - rect.startX) - FGcanvas.offsetLeft; //(event.clientX - rect.start.x) - canvas.offsetLeft 
    rect.h = (e.clientY - rect.startY) - FGcanvas.offsetTop; 
    FGcontext.clearRect(0,0,FGcanvas.width,FGcanvas.height); 
    draw(); 
    } 
} 


function draw() { 
    FGcontext.clearRect(0,0,FGcanvas.width,FGcanvas.height); 
    FGcontext.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
} 

Answer 1

我不完全一定，因爲我靠這麼多的jQuery的，但我不認爲你可以得到一個元素的偏移值時，它的絕對。

那麼，爲什麼不從絕對的父母的div得到的位置？我更換了這一點：

FGcanvas.offsetLeft 
FGcanvas.offsetTop 

有了：

document.getElementById('ramRod').offsetLeft 
document.getElementById('ramRod').offsetTop 

我也刪除位置：您在此處指定相對：

body, header, aside, footer, div { 
    display: block; 
    position: relative; 
} 

只因爲你再次指定它影響身體所有其他元素。

希望這有幫助！ （！首先回答這個網站）

編輯：哦，是忘了鏈接，這是我更新的小提琴：http://jsfiddle.net/ZDXWP/