css - 通过 CSS 与元素属性对比的 HTML5 Canvas 大小

Question

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

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

与这种方法相比(按预期工作):

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

Answer 1

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

• canvas 元素本身的 width 和 height 属性决定了您可以在多少像素上绘制。如果不指定 Canvas 元素的高度和宽度，则 per the specs :
  “宽度属性默认为300，高度属性默认为150。”

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

如果您在 CSS 中指定的尺寸与 Canvas 的实际尺寸不同，则必须根据需要由浏览器拉伸(stretch)和挤压以显示。您可以在此处查看示例:http://jsfiddle.net/9bheb/5/