为什么数字在画布上会出现扭曲？

Question

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

1. 我在里面调用 update() 函数，我改变了对象的 x 和 y。
2. 我用这行代码清除画布 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);
}

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

这是小提琴

Answer 1

使用宽度和高度属性（用于标记）或属性（在 JS 中）设置画布的大小：

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

在JS中：

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

不要使用 CSS，因为它只影响画布元素而不影响它的位图（将画布视为图像）。画布的默认大小为 300 x 150 像素。如果您不更改该大小，它将被拉伸到您使用 CSS 设置的大小。这就是我们通常不推荐使用 CSS 的原因（尽管在某些特殊情况下需要使用 CSS，例如打印情况、非 1:1 像素纵横比等）。