通过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那是 32×32(它具有完全相同总共1024个像素),但通过CSS,它应该指定出现的width:800px; height:16px.同样适用于HTML Canvas:

• 在width和heightcanvas元素本身的属性决定你能有多少像素借鉴.如果未指定canvas元素的高度和宽度,则根据规范:
  "width属性默认为300,height属性默认为150."

• 的width和heightCSS属性控制该屏幕上的显示元件的大小.如果未设置CSS尺寸,则元素的内在大小用于布局.

如果在CSS中指定的尺寸与画布的实际尺寸不同,则必须根据需要对浏览器进行拉伸和压缩以进行显示.你可以在这里看到一个例子:http://jsfiddle.net/9bheb/5/