javascript - 通过 javascript/jquery 在 html Canvas 上绘图，如何修复此鼠标 x/y 故障？

Question

我一直在寻找这个问题的答案，但我不知道我做错了什么......

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

所引用的代码位于github上，此处:My Github Repo 抱歉，我没有在任何地方托管它进行实时测试。如果有人知道我可以在哪里更轻松地回答这个问题，请告诉我。

无论如何，它都会创建一个 Canvas ，使用 JavaScript 绘制缩放到 Canvas 的 map 图像，并在您单击 Canvas 时绘制一个矩形。但由于某种原因，我无法弄清楚为什么矩形没有在光标上绘制，除非您单击 0,0。在您单击的更右侧或下方有某种附加偏移。我尝试检查控制台中的事件数据，并在网上到处搜索可能导致该事件的原因，但我不知道。

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

Answer 1

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

将 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;