HTML5 Canvas 上的矩形被拉伸

Posted 2023-05-08

【中文标题】HTML5 Canvas 上的矩形被拉伸

【英文标题】：Rectangle on HTML5 Canvas is stretched

【发布时间】：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"   />

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

【讨论】：

成功了，谢谢。我还必须删除#canvas 的 CSS 中的宽度和高度设置。再次感谢，

【参考方案2】：

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

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