css - 通过 CSS 确定 HTML5 Canvas 的大小与元素属性

Question

我不明白为什么以下代码会产生不同的结果，因为 css 会在放大 Canvas 时缩放 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; height:16px，会发生什么情况？ 。同样的情况也适用于 HTML Canvas:

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

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

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