【问题标题】：Why does CSS centering mess up canvas mouse coordinates?为什么 CSS 居中会弄乱画布鼠标坐标？
【发布时间】：2015-06-12 15:09:48
【问题描述】：

我正在制作一个简单的 HTML5 画布绘图应用程序。

在我的代码中，每当我将画布居中时

margin: auto;

或

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

鼠标坐标被移动，而这种移动或偏移量似乎取决于窗口的大小。

为什么鼠标坐标会偏移？

有什么方法可以防止这种情况，同时仍然获得相同的效果？

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

它们确实在移动，因为鼠标坐标是相对于客户端窗口而不是画布元素本身。

我怀疑您是按原样使用 clientX/Y 而没有对此进行补偿。

示例：修正鼠标位置

function getXY(canvas, event) {
    var rect = canvas.getBoundingClientRect();  // absolute position of canvas
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    }
}

现在只需在每次需要鼠标位置时调用此函数：

function onmousemove(e) {
    var pos = getXY(canvas, e);
    console.log(pos.x, pos.y);
}

这将提供调整后的位置。请注意，如果您使用它，它不会补偿边框或填充 - 在这些情况下，将画布包装在父 div 中并将边框/填充应用于该 div。

【讨论】：

@kba 谢谢！这是一个非常彻底的答案，并且效果很好。我有点震惊，你知道我哪里错了！在 Javascript 方面，您似乎是一位非常有经验的开发人员，您有什么推荐的书吗？