Question

最近我一直试图掌握javascript。在过去的几个月里，我一直在尝试使用不同的代码来查看通过javascript可以实现的一切。最近我一直试图找到各种方法通过javascript用画布捕获鼠标坐标。这是我的尝试：http://jsfiddle.net/f8n2one4/

如您所见，有一个MouseHandler，它应该通过ClientX和ClientY变量捕获鼠标坐标。但是，当我尝试显示这些变量时，什么都没有出现。那是为什么？

document.getElementById("test").innerHTML = "x: " + x + " y: " + y;

它不应该显示x和y值吗？

Answer 1

在您的示例中，您要初始化鼠标处理程序（使用MouseHandler.init(element)），但必须使用x方法访问y和getPos()值：

document.getElementById("test").innerHTML = 
    "x: " + MouseHandler.getPos().x + 
    " y: " + MouseHandler.getPos().y;

您可以看到小提琴here

的工作更新

Answer 2

x和y变量超出了draw（）方法的范围。

尝试以下方法：

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    player();
    MouseHandler.init(document);
    var clientPosition = MouseHandler.getPos();
    document.getElementById("test").innerHTML = "x: " + clientPosition.x + " y: " + clientPosition.y;   
}

看到它在这里工作。

我建议不要在每个间隔初始化整个MouseHandler，只是在每个间隔上获取位置。

此外，如果您使用.requestanimationframe（）而不是setInterval制作动画，那么您将获得更好的效果。

Answer 3

x和y不存在。你需要使用：

document.getElementById("test").innerHTML = "x: " + MouseHandler.getPos().x + " y: " + MouseHandler.getPos().y;

小提琴：http://jsfiddle.net/f8n2one4/3/

Answer 4

实际上非常简单，你的x，y超出了范围。

您可以通过MouseHandler变量访问它们：

MouseHandler.getPos().x
MouseHandler.getPos().y

或者尝试使用OOP Javascript并使用“new”运算符

实例化MouseHandler

var MouseHandler = function() {
    this.x = 0;
    this.y = 0;
}

var myMouseHandler = new MouseHandler();

console.log(myMouseHandler.x + myMouseHandler.y);

无法通过javascript获取鼠标坐标

4 个答案: