HTML5 Canvas 变形？答案

【问题标题】：HTML5 Canvas distorted?HTML5 Canvas 变形？
【发布时间】：2011-05-22 18:58:34
【问题描述】：

我想找点乐子看看画布。画一个盒子似乎很容易，所以我几乎从 mozilla 开发者网站上复制了一个例子。你可以在这里看到它：http://jsfiddle.net/Wolfy87/DZBwp/

如您所见，它已经变形。有没有人有任何想法？我正在设置相同的 x/y 和相同的宽度/高度。应该是个盒子吧？

【问题讨论】：

【解决方案1】：

自己修复了，我必须通过标签设置宽度和高度，而不是 CSS。幸运的猜测。

<canvas width='400' height='300'></canvas>

【讨论】：

【解决方案2】：

我有同样的问题，但我能够解决它，并在我的 css 中包含高度和宽度标签，但我无法在高度或宽度上使用 'px' 单位或 '%'。

canvas#my-id{
    width:400;
    height:300;
}

无论你使用 html 标签、css 还是使用 javascript/jquery 等设置都无关紧要。

【讨论】：

【解决方案3】：

Canvas 就像一个图像标签

画布的工作方式类似于图像，它具有宽度和高度。

对于图像，浏览器可以通过检查文件来计算宽度和高度。在画布的情况下，无法推断宽度和高度，因此您必须直接将它们设置为属性。

<canvas width="400" height="400" />

当您使用 CSS 设置宽度时，高度也会被调整以保持纵横比，就像图像一样。您可以将宽度设置为 100%，然后画布将填满容器。

canvas { 
  width:100% 
}

如果您同时设置宽度和高度，画布将被拉伸以适合您分配的空间，就像图像一样。

画布的默认宽度和高度为 300x150，比例为 2/1。

【讨论】：