HTML5 Canvas上的矩形被拉伸

Question

我正在一个网站上工作，我尝试使用javascript在HTML5画布上获取矩形。 通常情况下这没问题，但现在当我制作一个宽度和高度为10的矩形时。它似乎是一个宽度为10，高度为20的矩形。

我正在制作像这样的矩形：

var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");

context.fillRect(0, 0, 10, 10);

div画布设置宽度为100％，但我试图给它一个固定的宽度，这也没有帮助。

Answer 1

您需要在canvas元素上设置宽度和高度，否则这可能是某些浏览器的结果。

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

并且您无法使用CSS设置画布大小，这将拉伸画布。

Answer 2

画布的默认大小为300 x 150。

您可能正在使用这些默认值，这将使矩形看起来不正方形....