通过javascript/jquery在html画布上绘图，如何修复这个鼠标x/y故障?

Question

我一直在寻找这个问题的答案，但我无法弄清楚我做错了什么......

这是我在空闲时间做这样的事情的第一次尝试，这样我就可以利用我学到的东西为我的公司构建一个实际的工具。

引用的代码在 github 上，这里：My Github Repo 抱歉，我没有将其托管在任何地方进行实时测试。如果有人知道我可以把它放在哪里更容易回答这个问题，请告诉我。

在任何情况下，它都会创建一个画布，使用 javascript 绘制缩放到画布的地图图像，并在您在画布中单击时绘制一个矩形。但是由于某种原因，除非您单击 0,0，否则我无法弄清楚为什么矩形不会在光标上绘制。您单击的右侧或向下方向会产生某种附加偏移。我尝试在控制台中检查事件数据并在线到处搜索可能导致它的原因，但我不知道。

如果您有任何建议，我将不胜感激！谢谢！

Answer 1

请注意，您正在 CSS 中缩放画布，因此其坐标不再与屏幕坐标匹配。

将 CSS 更改为

canvas {
width: 800px;  /* same as the HTML attribute */
height: 600px; /* same as the HTML attribute */
}

坐标计算可以通过以下方式完成：

var posx = e.pageX - position.left, posy = e.pageY - position.top;