鼠標座標限制爲1個元素，而不是頁面大小

嗨，大家好，我正在用Canvas繪製鼠標的方法。這是我在多大程度上是：鼠標座標限制爲1個元素，而不是頁面大小

function drawdraw(){ 
    test = document.getElementById('test'); 
    ctx = test.getContext('2d'); 

    window.addEventListener("mousemove", drawing,false); 
} 

function drawing(e){ 
    ctx.clearRect(0,0,500,200); 
    var xPos = e.pageX-test.offsetLeft; 
    var yPos = e.pageY-test.offsetTop; 
    ctx.fillRect(xPos, yPos,30,30); 
} 
window.addEventListener("load", drawdraw,false);

我現在的問題是，我沒有正確的光標座標。我試過e.clientX，e.clientX和上面的例子。

我希望能夠動態地移動畫布，並且我希望鼠標的座標在畫布的左上角爲0,0，在畫布的右下角爲500,200。換句話說，我只想讓我的座標位於畫布內，而不是頁面的座標。有人嗎？ :)

Btw。我對JavaScript解決方案感興趣，所以如果可以的話，我想避免使用jQuery。

來源

2013-02-16 Kristian Daugaard

test是函數drawdraw的局部變量，您也在drawing函數中使用它。您需要將其聲明爲全局變量。

來源

2013-02-16 14:55:05

多數民衆贊成如此，我修正了這個問題，但仍然沒有結果 – 2013-02-16 14:57:19

我目前的結果是，它註冊我的鼠標事件在從頂部約200px，從左邊0px。這是相對於身體標記或HTML標記，如果你願意。但我需要它是相對於畫布，我只是不知道代碼 – 2013-02-16 15:00:27

@KristianDaugaard'e.pageX' /'e.pageY'爲您提供了HTML文檔中光標位置的值。你可以從'e.pageX' /'e.pageY'減去畫布'top' /'left'的位置，它會給你相對於畫布。 – 2013-02-16 15:01:52

鼠標座標限制爲1個元素，而不是頁面大小

回答

相關問題