大小属性

我不知道为什么下面的代码段产生不同的结果，因为它被放大的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

回答