css - 设置 CSS 后 Canvas 坐标可能不起作用

Question

我在 Canvas 上的拖放游戏运行良好，但在我的 css 文件中设置之后

#canvas
{
    width:100%
}

为了让我的 Canvas 响应，我的坐标完全移位。 例如:如果我点击图像的中心，它不起作用。我必须单击偏移量中图像附近的某处。无需设置我的 css，我可以毫无问题地点击图像。

Answer 1

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

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

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

2. 尝试算出 <canvas> 的结果大小在 css 缩放开始后相应地重新计算鼠标坐标。

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

总而言之，像 paper.js 或类似的库可以为您提供。