Canvas 画布X Y坐标

如何解决Firefox中任何画布的XY坐标。我在Firefox中使用clientX和layerX。出于某种原因，layerX不起作用

   $("#circle").click(function(e) {

        painter.brush = function(e) {
            var shape = Circle(e.clientX, e.clientY, 0, paper);
            shapes.push(shape);

            $paper.bind('mousemove', function(e) {
                shape.updateEnd(e.clientX, e.clientY);
            });
        };

        $paper.bind('mouseup', function(e) {
            var shape = shapes.pop();             
            $(this).unbind('mousemove');
        });

        $paper.bind('mousedown', function(e) {
            painter.brush.call(this, e);
        });

    });

---

e.clientX，e.clientY

报告相对于文档客户端窗口的坐标，而不是相对于画布的坐标

因此，您必须说明画布在文档上的位置。您可以使用

.getBoundingClientRect

获取画布相对于文档的位置

function handleMouseMove(e){
    BB=canvas.getBoundingClientRect();
    mouseX=parseInt(e.clientX-BB.left);
    mouseY=parseInt(e.clientY-BB.top);
}

---

Mozilla在其网站上指出了这一点：

非标准
此功能为非标准功能，不在标准上 跟踪。不要在面向Web的生产站点上使用它：它不会 为每个用户工作。两者之间也可能存在很大的不兼容性 实现和行为在将来可能会发生变化

换句话说，尽量避免使用这些属性——这只会给你带来问题，因为它们不适用于所有人

现在更合适的方法是使用

getBoundingClientRect（）

，它与客户机窗口相关，顾名思义就是视口（说到它，文档、页面、客户机可能会令人困惑，请参阅以获取概述）

它将考虑滚动（）：

视口区域已完成的滚动量（或 在计算 边框

但为了补偿元素位置和鼠标位置之间的差异，我们只需从鼠标坐标中减去元素位置：

var rect = el.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;

现在您将拥有相对于画布的正确位置。不过有几个警告：

• 未考虑边界厚度
• 没有考虑填充

如果需要边框和/或填充，可以使用一个简单的技巧，即在div中插入canvas元素。改为在div元素上应用padding/border

或者，您可以使用计算元素的边框/填充厚度（仅限左侧和顶部），然后从位置中减去这些厚度