Question

我在HTML5的画布时遇到鼠标坐标问题。我正在使用JavaScript绘制@ canvas。

这是我当前在画布中定位鼠标指针的代码：

$('#canvasID').mousedown(function(e) {   
    // Mouse down location
    var mouseX = e.pageX - this.offsetLeft;   
    var mouseY = e.pageY -
    this.offsetTop;
});

当然，我的网页有很多内容，例如我包含标题和菜单框。

如何在画布esp中精确指出鼠标指针。从不同的PC分辨率？

Answer 1

这应该总是在画布上返回正确的位置。

$("#canvasID").mouseup(function(e) {
  var offset = $(this).offset();
  var mouseX = e.pageX - offset.left;
  var mouseY = e.pageY - offset.top;
});

Answer 2

是的，我们走了：https://stackoverflow.com/a/4430498/126584
firefox＆gt;。＆lt;

不支持event.offsetX / Y.

在$('#canvasID').mousedown(function(e) {内，e.offsetX和e.offsetY应该具有相对于画布左上角的坐标。要快速而肮脏地查看e（vent）中的所有内容，请将内容转储到<div id='debug'>

中

$('#canvasID').mousedown(function(e) {
    debug(dump(e));
});

// debug (msg)
function debug (msg) {
    $('#debug').prepend(msg+'<br>\n');
}

// dump(ob)
function dump(ob) {
  var out;
  out = 'Properties:<br>\n';
  for (prop in ob) {
    out = out + prop + ': ' + ob[prop] + '<br>\n';
  }
  return out;
}

长＆amp;迟到的回答，刚刚发现这个，因为我现在正在玩帆布:-)希望它仍然可以帮助某人。

绘制HTML5画布的指针（鼠标坐标）

2 个答案: