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设置画布大小,这将拉伸画布.