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

【问题标题】：Drawing pointer(mouse coordinates) for canvas of HTML5HTML5画布的绘制指针（鼠标坐标）
【发布时间】：2011-11-24 05:56:44
【问题描述】：

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

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

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

当然，我的页面有很多包含，比如我包含标题和菜单框。

鼠标指针如何在画布内精确，尤其是。不同分辨率的电脑？

【问题讨论】：

你可能想看看这个：dev.opera.com/articles/view/html5-canvas-painting
感谢您的建议 :)
我没有将此作为答案发布，因为没有明确的问题。你能解释一下（在问题中）你遇到了什么问题吗？
先生，谢谢。我已经解决了这个问题。还是谢谢你。

标签： javascript html canvas drawing

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

好的，我们开始：https://stackoverflow.com/a/4430498/126584
Firefox 不支持 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;
}

答案很长很晚，我现在正在玩画布时发现了这个 :-) 希望它仍然对某人有所帮助。

【讨论】：