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

【问题标题】：Size of HTML5 Canvas via CSS versus element attributes通过 CSS 与元素属性的 HTML5 Canvas 大小
【发布时间】：2011-06-29 09:41:46
【问题描述】：

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

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

与这种方法相比（按预期工作）：

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

【问题讨论】：

您能解释一下“因为 css 会在画布放大时缩放画布”的意思吗？干杯！
是的，当您应用 css 样式时，画布适合 800x600，但其中的内容被“放大”，就像画布坐标系保持默认大小，但被“拉伸”。如果我不清楚，请告诉我。我正在使用 Firefox 4.0b11
这可能会有所帮助：stackoverflow.com/questions/1977741/resizable-canvas-jquery-ui/…
请注意，画布的 width 和 height 属性不应有尺寸（与 CSS 不同）。你应该有width="800"，而不是width="800px"。
s/维度/显式像素单位/

【解决方案1】：

调整画布大小的最佳方法是包含在一个 div 中，并使用您想要的大小设置 div 的样式。

这里是 CSS

<style>
#divCanvas{
    width: 800px;
    height: 600px;
}
</style>

这里是 HTML

<div id="divCanvas">
    <canvas id="canvas"></canvas>
</div>

【讨论】：

【解决方案2】：

想一想，如果您的 JPG 为 32x32（它总共有 1024 个像素），但通过 CSS 指定它应该显示为 width:800px; height:16px，会发生什么情况。同样的事情也适用于 HTML Canvas：

canvas 元素本身的width 和height 属性决定了您可以在多少像素上绘制。如果不指定canvas元素的高宽，那么per the specs:
“width属性默认为300，height属性默认为150。”
width 和 height CSS 属性控制元素在屏幕上显示的大小。如果未设置 CSS 尺寸，则使用元素的固有尺寸进行布局。

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

【讨论】：

@Phrogz 的答案比接受的答案更清晰。像素尺寸由其height 和width HTML 属性（或默认 300x150）指定的画布将缩放到 CSS 属性指定的大小。
@Phrogz 在我看来这似乎是正确的答案。
作为补充，这里是我正在使用的，以便画布从 CSS 中获取它的大小。 substring 是去掉px 字符串末尾的const canvas = document.querySelector("canvas"); const compStyles = window.getComputedStyle(canvas); canvas.width = compStyles.width.substr(0, compStyles.width.length - 2); canvas.height = compStyles.height.substr(0, compStyles.height.length - 2);
如果我想在调整浏览器大小时更改画布的实际大小怎么办？
@RonInbar 为resize事件添加一个事件监听器，并设置canvas元素的width和height属性匹配offsetWidth和offsetHeight属性显示其实际大小.例如：stackoverflow.com/a/8686566/405017 phrogz.net/tmp/canvas-fullscreen.html

【解决方案3】：

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

【讨论】：