Javascript 鼠标在画布上的位置

下面的代码绘制正确，但绘制到错误的坐标。它应该画出鼠标所在的位置。我没能发现我的错误。谢谢

---

您正在CSS中设置画布的宽度和高度。这会像拉伸图像一样拉伸画布

效果在错误的位置绘制

相反，您需要在标记本身上设置画布尺寸：

<canvas width="400" height="400"></canvas>

A

有自己的

宽度

和

高度

，这不仅定义了它的物理大小（除非CSS介入），还定义了它的逻辑大小（它的绘图表面上像素的行/列数）。当CSS更改大小时，画布会拉伸以适应，但不会更改其逻辑大小。基本上，像素也会拉伸，因此逻辑坐标和物理坐标不再匹配

---

要解决此问题，您可以进行数学运算以匹配坐标备份，或者专门使用画布自身的宽度/高度来调整其大小，或者在事后设置画布的宽度和高度属性以匹配CSS设置的宽度和高度。

谢谢。我白白浪费了我的时间：D。但为什么一定要这样呢？只要把canvas想象成一个你可以画进去的元素，那么它就更有意义了。注意，你也可以用JavaScript设置宽度/高度，比如：canvas.width='400'；canvas.height='300'@瑞安布里尔：是的。但是高度和宽度属性都是数字，所以最好不要加引号。（这两种方法都可以，但看起来更干净。）@ryanbrill在修正后的小提琴中，我为他的“临时画布”做了这件事：）

<canvas width="400" height="400"></canvas>