画布坐标不设置CSS

Question

我拖后可能工作，并以帆布掉落游戏工作正常，但之后我在CSS文件设置

#canvas 
{ 
    width:100% 
} 

，使我的画布响应，我的坐标是完全流离失所。例如：如果我点击了一张图片的中心，它不起作用。我必须点击偏移处图像附近的某处。没有设置我的CSS，我可以点击图像没有任何问题。

Answer 1

这是因为<canvas>的大小，由width和height属性指定。这些值也决定了底层Ima​​ge Data Array的大小。此外，这些值决定了坐标系，用于<canvas>。

如果使用css缩放<canvas>，则不会缩放<canvas>的坐标系。有太多的方式来左右是：使用JavaScript和设置width和height属性

1. 规模的<canvas>。需要注意的是他们中的一个变化将清除<canvas>

2. 揣摩所导致的<canvas>的大小CSS缩放踢后，重新计算鼠标相应坐标。

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

总而言之，像paper.js或类似的库提供给你。