为什么画布圈看起来不像圆圈？

Question

我有一个非常简单的代码，应该绘制一个圆，但它看起来不像一个，而不是在正确的位置。坐标都有点偏移。画布设置为style="width: 600px; height: 600px;"。我在chrome和safari上试过它 - 看起来一样，所以它不是浏览器的bug。 所以我的问题是（两者都有一个答案）：

1. 如果我把中心放在（100,100），为什么圆圈与左边界的距离不等，它是从顶部边界开始的？
2. 为什么（300,300）指出了画布，而不是在中心？

代码：

var context = document.getElementById('c').getContext("2d");
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(100, 100, 30, 0, 2 * Math.PI, true);
context.stroke();

它看起来如何：

修改

根据评论我发现写<canvas id="myCanvas" style="width: 578px; height: 200px;"></canvas>导致了这个问题，写<canvas id="myCanvas" width="578" height="200"></canvas>解决了这个问题。谁知道为什么？

Answer 1

HTML5 Canvas spec中记录了这一点。

HTML属性 width="x" height="y"描述画布的绘图区域，默认为300 × 150 px。作为副作用，它们描述了画布的默认可见大小。

画布上设置的 CSS属性 width: x; height: y;可以拉伸/压缩该绘图区域，但它们不会改变其大小。

在您的情况下，浏览器会拉伸默认绘图区域（300 × 150 px）以满足给定的600 × 600 px CSS。

Answer 2

此示例显示如何在画布上绘制圆圈：http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

此外，您需要在canvas元素上设置width和height属性，而不是style属性，如下所示：

<canvas id="c" width="600" height="600" style="background-color:yellow;"></canvas>