为HTML5画布绘制指针(鼠标坐标)

Drawing pointer(mouse coordinates) for canvas of HTML5

本文关键字：指针 鼠标 坐标 绘制 HTML5 布绘制      更新时间：2023-09-26

当在canvas上绘制HTML5时，我在鼠标坐标上遇到了麻烦。我正在使用JavaScript绘制@ canvas。

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

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

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

鼠标指针如何在画布内精确，特别是从不同的分辨率的pc?

这将始终返回画布上的正确位置。

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

好了，开始吧:https://stackoverflow.com/a/4430498/126584
事件。>.<</p>

在$('#canvasID').mousedown(function(e) {内部，e.offsetX和e.o ffsetty应该具有相对于画布左上角的坐标。为了快速而简单地查看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;
}

长,迟到的回答，刚刚发现这个，因为我正在玩画布现在:-)希望它仍然帮助别人。

相关文章：