我如何獲得Javascript Canvas以返回x和y鼠標位置？

Question

我的目標是從我的鼠標的x和y位置實時更新輸入。 y位置效果很好，但是當我去添加x位置時，除了'NaN'我什麼也得不到。

爲什麼這不適用於X位置？這不是如何通過一個函數傳遞一個對象？是多個對象的問題？

這裏是我的代碼：

canvas.addEventListener('mousemove', 
    function(evt){ 
     var mousePos = calculateMousePosY(evt); 
     paddle1Y = mousePos.y; 
     //HERE IS WHERE I WANT X POSITION AS WELL 
     paddle1X = mousePos.x; //Why doesn't this work? 
    }); 
function calculateMousePos(evt){ 
    var rect = canvas.getBoundingClientRect(); 
    var root = document.documentElement; 
    var mouseX = evt.clientX - rect.left - root.scrollleft; 
    var mouseY = evt.clientY - rect.top - root.scrollTop; 
    return{ 
     x:mouseX, 
     y:mouseY   
    } 

Answer 1

變化var mouseX = ... - root.scrollleft;到var mouseX = ... - root.scrollLeft;大寫的 '左' 的 'L'。

此外，您的功能被稱爲calculateMousePos而不是calculateMousePosY。刪除「Y」。

Answer 2

有兩個發生在你的代碼中進行，

• 你的函數調用了拼寫var mousePos = calculateMousePosY(evt);的失配和function calculateMousePos(evt){...}有一個額外的「Y」。
• 它是scrollLeft，大寫字母「L」。

請在下面找到的代碼：希望它有助於]

HTML：

<canvas id="myCanvas" width="578" height="200"></canvas> 

的Javascript：

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
canvas.addEventListener('mousemove',function(evt){ 
 
     var mousePos = calculateMousePos(evt); 
 
     var values = 'Mouse position:' + mousePos.x + ',' + mousePos.y; 
 
     display(canvas, values); 
 
    }); 
 
function calculateMousePos(evt){ 
 
    var rect = canvas.getBoundingClientRect(); 
 
    var root = document.documentElement; 
 
    var mouseX = evt.clientX - rect.left - root.scrollLeft; 
 
    var mouseY = evt.clientY - rect.top - root.scrollTop; 
 
    return{ 
 
     x:mouseX, 
 
     y:mouseY   
 
    } 
 
} 
 
    
 
    
 
function display(canvas, values) { 
 
     var context = canvas.getContext('2d'); 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 
     context.font = '18pt Calibri'; 
 
     context.fillStyle = 'black'; 
 
     context.fillText(values, 10, 25); 
 
}

<canvas id="myCanvas" width="578" height="200"></canvas>