我如何获得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>