Html 通过 CSS 与元素属性的 HTML5 Canvas 大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5034529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Size of HTML5 Canvas via CSS versus element attributes
提问by Joaquín L. Robles
I don't get why the following pieces of code produce different results, because css would scale the canvas as it was zoomed in,
我不明白为什么下面的代码会产生不同的结果，因为 css 会在放大时缩放画布，
<style>
#canvas {
width: 800px;
height: 600px;
}
</style>
<canvas id="canvas"></canvas>
In contrast with this approach (that works as expected):
与此方法相反（按预期工作）：
<canvas id="canvas" width="800px" height="600px"></canvas>
回答by Phrogz
Think about what happens if you have a JPG that is32x32 (it has exactly 1024 total pixels) but specify via CSS that it should appearas width:800px; height:16px. The same thing applies to HTML Canvas:
想想，如果你有一个JPG会发生什么是32×32（它具有完全相同总共1024个像素），但通过CSS，它应该指定出现的width:800px; height:16px。同样的事情适用于 HTML Canvas：
The
widthandheightattributes of the canvas element itself decide how many pixels you can draw on. If you don't specify the height and width of the canvas element, then per the specs:
"the width attribute defaults to 300, and the height attribute defaults to 150."The
widthandheightCSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.
canvas 元素本身的
width和height属性决定了您可以绘制多少像素。如果您不指定画布元素的高度和宽度，则根据规范：
“宽度属性默认为 300，高度属性默认为 150。”的
width和heightCSS属性控制尺寸屏幕上的元件的显示器。如果未设置 CSS 尺寸，则使用元素的固有尺寸进行布局。
If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/
如果您在 CSS 中指定了与画布实际尺寸不同的尺寸，则浏览器必须根据需要对其进行拉伸和挤压以进行显示。你可以在这里看到一个例子：http: //jsfiddle.net/9bheb/5/
回答by Joaquín L. Robles
The explanation is here: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-widthas seen in another post, thanks!
解释在这里：http: //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width如在另一篇文章中所见，谢谢！
The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.
canvas 元素的内在尺寸等于坐标空间的大小，数字以 CSS 像素解释。但是，元素可以通过样式表任意调整大小。在渲染过程中，图像被缩放以适应此布局大小。
回答by Diego Martins
The best way to size your canvas is to include in a div and style your div with the size that you want.
调整画布大小的最佳方法是包含在一个 div 中，并使用您想要的大小设置 div 的样式。
Here is the CSS
这是CSS
<style>
#divCanvas{
width: 800px;
height: 600px;
}
</style>
Here is the HTML
这是 HTML
<div id="divCanvas">
<canvas id="canvas"></canvas>
</div>
