1

我正在使用 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){ 。

任何帮助表示赞赏，谢谢。

4

3 回答 3

3

你需要做

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

然后在函数中使用 wherex,y

于 2010-09-11T19:49:01.073 回答
1 
$('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();
}
于 2010-09-11T19:15:07.813 回答
0

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

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

于 2010-09-11T19:15:03.030 回答