为什么画布圆弧不是圆形？

Question

在 JSFiddle 中，我使用标准语法创建了一个圆弧，它创建了一个又长又瘦的省略号。我发现我应用的 css 决定了它的尺寸而不是画布。为什么是这样？

JSFiddle： https: //jsfiddle.net/jey2fodj/2/

HTML：

<div id='drawSpace'></div>

CSS：

.circle {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

JavaScript：

var c = document.createElement('canvas');
c.className = 'circle';

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,3*Math.PI);
ctx.stroke();

document.getElementById('drawSpace').appendChild(c);

继续更改样式的宽度/高度以帮助理解问题。谢谢。

Answer 1

更改画布的尺寸会拉伸画布。为了避免这种情况，请尝试将宽度和高度属性与样式属性分开设置。

资料来源：http ://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

作为圆圈的旁注：您只需要2*Math.PI，而不需要3*Math.PI。