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。

您可能正在使用这些默认设置，这会使矩形看起来不是方形....