Question

我正在使用jQuery和<canvas>元素构建一个突破游戏。要控制球拍，它将跟随鼠标。所以我需要在我的drawPaddle()方法中获得鼠标坐标。

在jQuery网站上看它有这样的例子：

$(document).mousemove(function(e){
    $('#status').html(e.pageX +', '+ e.pageY);
});

我想要的是什么，但我不想像这样向我的项目添加另一个功能。这是我的drawPaddle()方法：

function drawPaddle() {
    c.beginPath();
    c.rect(paddleX, paddleY, 150, 10);
    c.closePath();
    c.fill();
    // Get mouse position and update paddleX and paddleY here
}

因此，无论何时调用drawPaddle()，我都需要找到一种获取鼠标位置的方法，而不是像$(document).mousemove(function(e){那样在页面上移动鼠标时的方法。

感谢任何帮助，谢谢。

Answer 1

你需要做

var where = {}
$('canvas').mousemove(function(e){
    where.x = e.pageX
    where.y = e.pageY;
});

然后在函数

中使用wherex，y

Answer 2

$('canvas').mousemove(function(e){
    drawPaddle(e.pageX, e.pageY);
});


function drawPaddle(paddleX, paddleY) {
    c.beginPath();
    c.rect(paddleX, paddleY, 150, 10);
    c.closePath();
    c.fill();
}

Answer 3

我认为没有事件就没有办法做到这一点。我不知道JavaScript中没有全局存储该信息的字段。前段时间我遇到了同样的问题并且使用mousemove事件做了那个，因为我找不到其他解决方案。也许有些浏览器实现了获取这些坐标的方法，但我不知道。

但也许您可以在画布上使用mouseenter和mouseleave事件来启用/禁用鼠标位置捕获。这将减少函数调用。

使用jQuery获取鼠标坐标

3 个答案: