大小屬性

我不知道爲什麼下面的代碼段產生不同的結果，因爲它被放大的CSS將擴展畫布，大小屬性

<style> 
#canvas { 
    width: 800px; 
    height: 600px; 
} 
</style> 
<canvas id="canvas"></canvas>

在與此不同的方法（如預期的作品）：

<canvas id="canvas" width="800px" height="600px"></canvas>

你能解釋一下你的意思嗎？「因爲CSS會縮放放大後的畫布」？乾杯! – polarblau 2011-02-17 21:06:17

是的，當您應用css樣式時，畫布適合800x600，但內部內容是「放大」的，就像畫布座標系保持其默認大小，但是「拉伸」。如果我不夠清楚，請告訴我。我正在使用Firefox 4.0b11 – 2011-02-17 21:25:05

這可能有所幫助：http://stackoverflow.com/questions/1977741/resizable-canvas-jquery-ui/2042935 – Xavi 2011-02-17 22:01:38

畫布元素的固有尺寸等於座標空間的大小，數字解釋爲CSS像素。但是，該元素可以通過樣式表任意調整大小。 在渲染過程中，圖像被縮放以適合此佈局大小。

2011-02-17 21:29:02

想想，如果你有一個JPG即是 32×32（它具有完全相同總共1024個像素），但通過CSS指定它應該出現爲width:800px; height:16px會發生什麼。同樣的道理也適用於HTML畫布：

canvas元素本身決定你能有多少像素藉鑑的width和height屬性。如果您未指定畫布元素的高度和寬度，則per the specs：
「寬度屬性默認爲300，高度屬性默認爲150」。
width和height CSS屬性控制元素在屏幕上顯示的大小。如果未設置CSS尺寸，則使用元素的固有尺寸進行佈局。

如果您在CSS中指定與畫布的實際尺寸不同的尺寸，則必須根據需要將其展開並壓扁。你可以在這裏看到一個這樣的例子：http://jsfiddle.net/9bheb/5/

2011-02-18 19:15:34 Phrogz

回答