在沒有jQuery的情況下在畫布中獲取光標位置

我正在嘗試學習如何使用HTML canvas元素，並且自然地，我在製作繪圖應用程序。所以，我已經爲應用程序的實際繪圖和動畫部分設置了代碼，但我不知道如何獲取鼠標光標的位置。我真的不想使用jQuery，因爲我寧願不想學習它所做的所有事情，也不得不通過建立它的過程。謝謝你的幫助！在沒有jQuery的情況下在畫布中獲取光標位置

來源

2012-10-07 Aearnus

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(), root = document.documentElement; 

    // return relative mouse position 
    var mouseX = evt.clientX - rect.left - root.scrollLeft; 
    var mouseY = evt.clientY - rect.top - root.scrollTop; 
    return { 
     x: mouseX, 
     y: mouseY 
    }; 
    } 

    window.onload = function() { 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    canvas.addEventListener('mousemove', function(evt) { 
     var mousePos = getMousePos(canvas, evt); 
     var message = "Mouse position: " + mousePos.x + "," + mousePos.y; 
     alert(message); 
    }, false); 
    };

Source

來源

2012-10-07 21:26:44 MyBoon

好的，這正是我想要的。感謝你！ – Aearnus

這是我見過的唯一使用'document.documentElement'的解決方案 - 在什麼情況下需要減去root？ –

這是有道理的，以獲得畫布內的相對位置。例如：頁面向下滾動200px。畫布安裝在20px，400px（x，y）處。事件發生。 'clientX'和'clientY'在'（40px，300px）'的視口內返回一個位置。上面的簡單數學會告訴你這是在畫布內的'（20px，100px）'。 – STRML

當用它來繪製在畫布上，我更喜歡這樣的代碼：

function getMousePos(canvas, event) 
{ 
    var mouseX = event.pageX - canvas.offsetLeft; 
    var mouseY = event.pageY - canvas.offsetTop; 
    return { 
     x: mouseX, 
     y: mouseY }; 
}

這是我用來避免滾動，位置和我還有其他問題的代碼獲得鼠標的正確位置。

來源

2012-10-08 02:19:16 Vivix

在沒有jQuery的情況下在畫布中獲取光標位置

回答

相關問題