设置CSS后，Canvas坐标可能无法正常工作

Question

我在画布上的拖放游戏工作正常，但在我设置了我的css文件后

#canvas
{
    width:100%
}

为了使我的画布响应，我的坐标完全被移位。 例如：如果我点击图像的中心，它就不起作用。我必须在偏移处的图像附近点击某处。如果没有设置我的CSS，我可以毫无问题地点击图片。

Answer 1

这是因为width的大小由height和<canvas>属性指定。这些值也决定了底层图像数据阵列的大小。此外，这些值确定坐标系，用于<canvas>。

如果使用css缩放<canvas>，则不会缩放<canvas>的坐标系。有太多方法可以解决这个问题：

1. 使用Javascript缩放width并设置height和<canvas>属性。请注意，更改其中一个将清除<canvas>

2. 尝试在css缩放开始后计算出{{1}}的结果大小，并相应地重新计算鼠标坐标。

我建议使用方法1，因为这样可以确保画布始终显得清晰。

总而言之，像paper.js或类似的图书馆为你提供了这些。