通过CSS与元素属性的HTML5 Canvas的大小

Question

我不明白为什么下面的代码会产生不同的结果，因为css会在放大时缩放画布，

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

与此方法（按预期方式有效）形成对比：

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

Answer 1

解释如下：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width如另一篇文章中所见，谢谢！

  

canvas元素的内在尺寸等于坐标空间的大小，数字以CSS像素解释。但是，元素可以通过样式表任意调整大小。 在渲染过程中，图像会缩放以适合此布局尺寸。

Answer 2

如果您的JPG 32x32（它的总像素正好是1024），请考虑一下会发生什么情况，但是通过CSS指定它应该显示为 {{1} }。同样适用于HTML Canvas：

• canvas元素的width:800px; height:16px和width属性决定了您可以绘制的像素数。如果未指定canvas元素的高度和宽度，则per the specs：
  “width属性默认为300，height属性默认为150。”

• height和width CSS属性控制元素在屏幕上显示的大小。如果未设置CSS尺寸，则元素的固有尺寸将用于布局。

如果在CSS中指定的尺寸与画布的实际尺寸不同，则必须根据需要对浏览器进行拉伸和压缩以进行显示。您可以在此处查看此示例：http://jsfiddle.net/9bheb/5/