javascript - 为什么 Canvas 圆弧不是圆形？

Question

在 JSFiddle 中，我使用标准语法创建了一个圆弧，它创建了一个细长的 elips。我发现我正在应用的 css 决定了它的尺寸而不是 Canvas 。这是为什么？

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

更改 Canvas 的尺寸会拉伸(stretch) Canvas 。为避免这样做，请尝试将宽度和高度属性与样式属性分开设置。

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

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