HTML5 Canvas扭曲了吗？

Question

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

你可以看到它已经扭曲了。有没有人有任何想法？我设置相同的x / y和相同的宽度/高度。它应该是一个盒子，对吧？

Answer 1

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

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

Answer 2

Canvas的工作方式类似于图像标记

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

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

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

CSS

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

canvas { 
  width:100% 
}

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

默认值

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

Answer 3

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

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

无论你使用html标签，css还是用javascript / jquery等设置它都不应该是件事。