畫布座標不設置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或類似的庫提供給你。