通过 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;