HTML5 Canvas 上的矩形被拉伸答案

【问题标题】：Rectangle on HTML5 Canvas is stretchedHTML5 Canvas 上的矩形被拉伸
【发布时间】：2011-10-17 23:54:47
【问题描述】：

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

我正在制作这样的矩形：

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

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

div 画布的宽度设置为 100%，但我试图给它一个固定的宽度，但这也无济于事。

【问题讨论】：

【解决方案1】：

您需要在画布元素上设置宽度和高度，否则在某些浏览器中可能会出现这种情况。

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

而且你不能用 CSS 设置画布大小，这会拉伸画布。

【讨论】：

【解决方案2】：

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

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

【讨论】：