画布的相对位置

Question

我一直在玩HTML5中的canvas元素，我试图获得画布的相对位置。

我正在使用layerX和layerY，这似乎是最明显的解决方案，但由于某种原因，也许这就是它如何工作的层，即X / Y看到的点位于指针的左角。我的代码如下

function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

它只是将_x / y元素添加到ev对象，因此我可以在绘图表面上使用它们。

这是一段关于我发生的事情的视频。

http://img.zobgib.com/2011-03-21_1413.swf

如果您想自己玩，可以http://research.zobgib.com/beta

我只需要设置手动偏移，还是图层X / Y错误？

编辑：

我可以添加一个手动偏移，但这似乎是将x / y位置放在propor位置的错误方法

偏移的代码只是

...
ev._x = ev.layerX-10;
ev._y = ev.layerY-13;
...

编辑2：

在opera中，光标是一个指针，默认情况下位置是正确的。

在Chrome和safari中单击（默认情况下，不返回false），光标将变为文本选择器，位置位于文本选择器的底部。

在firefox中，光标是一个指针但位置在手的中心。

• 其中return false;

  • 在mousedown /移动光标上的Safari仍然是一个指针但位置关闭
  • Firefox保持不变，不返回false
  • 奥普拉仍然获胜
  • Chrome光标仍为“鼠标光标”，位置关闭。

• 使用偏移量

  • Safari接近正确（稍高于）
  • Firefox略高于
  • 奥普拉胜利
  • Chrome正确

必须有更好的方法

PS我无法测试IE，所以任何结果都不错

Answer 1

layerX和layerY返回相对于整个文档的偏移量，除非事件发生在提到的元素内。最简单的解决方案是添加：

#beta {
    position: absolute;
}

或者，您可以先获取文档中canvas的位置，然后计算相对于这些坐标的偏移量，如上一个答案中所述：

• Tracking mouse position in canvas when no surrounding element exists

Answer 2

坐标是相对于页面的，但它们是相对于画布绘制的。

因此，点从画布的左上角到页面左上角的距离偏离。你需要通过从X和Y坐标中减去canvas.offset（）。left和canvas.offset（）。top的值来纠正这个问题。