为什么数字在画布上显得扭曲？

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。这同样适用于圆圈。我在这里错过了什么？

here是小提琴

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像素长宽比等）。

Answer 2

可能是因为你将你的画布设计成带有/ height的服装。画布＆＃39;默认宽度/高度为150 * 300，如果缩放不好，则会获得找到的结果。

drawImage(image, x, y, width, height)
    This adds the width and height parameters, which indicate the size to which to 
    scale the image when drawing it onto the canvas.

简而言之，你必须缩放你的图纸。

the Canvas element on MDN

Canvas drawing on MDN