javascript - 为什么人物在 Canvas 上显得扭曲？

Question

我正在玩 html5 canvas，我遇到了一些奇怪的行为。我正在根据这三个步骤制作非常基本的动画:

1. 我在内部调用 update() 函数来更改对象的 x 和 y。
2. 我用这行代码清除 Canvas this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
3. 我重新绘制了所有元素。

这是我画图的方式:

// drawing a circle
function drawCircle(x,y) {
    var rad = 5;
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
}

// and a rect
function drawRect(x, y,) {
     var width = 60,
       height = 10;
    ctx.fillRect(x, y, width, height);
}

现在我希望我的矩形宽度为 60 像素，高度为 10 像素。我在 <canvas> 之后添加了一个 div标记并将其宽度和高度分别设置为 60px 和 10px，以说明差异。正如你在图片上看到的，显然我的矩形不是 60х10。这同样适用于圆。我在这里错过了什么？

here是 fiddle

Answer 1

使用它的宽度和高度属性(对于标签)或属性(在 JS 中)设置 Canvas 的大小:

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

在 JS 中:

canvasEl.width = 400;
canvasEl.height = 400;

不要使用 CSS，因为它只会影响 Canvas 元素 而不会影响其位图(将 Canvas 视为图像)。 Canvas 的默认大小为 300 x 150 像素。如果您不更改该大小，它将被拉伸(stretch)到您使用 CSS 设置的大小。这就是为什么我们通常不建议使用 CSS(尽管在某些特殊情况下需要 CSS，例如打印情况、非 1:1 像素长宽比等)。