HTML5 Canvas扭曲了吗？

Question

我觉得有点好玩,我会看看画布.绘制一个盒子似乎相当容易,所以我几乎从mozilla开发者网站复制了一个例子.你可以在这里看到它:http://jsfiddle.net/Wolfy87/DZBwp/

正如你所看到的,它已经扭曲了.有没有人有任何想法？我设置相同的x/y和相同的宽度/高度.它应该是一个盒子,对吗？

Answer 1

我自己修正了,我不得不通过标签设置宽度和高度,而不是CSS.幸运的猜测.

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

Answer 2

画布就像图像标签一样工作

画布的工作原理类似于图像，具有宽度和高度。

对于图像，浏览器可以通过检查文件来确定宽度和高度。对于画布，无法推断宽度和高度，因此必须直接将其设置为属性。

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

的CSS

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

canvas { 
  width:100% 
}

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

默认值

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