Javascript 在画布上画一个完美的圆圈，用大的镀铬线条宽度

我正在HTML画布上画一个圆圈（r=100px，线宽500 px），使用google chrome应用程序的方法.arc of canvas API

但是由于大的线宽，圆中的不准确度被放大了，它看起来不再像一个圆了

这是一个演示

是否有任何方法/技巧可以使用.arc方法或任何其他方法在画布上绘制一个大线宽的完美圆

---

编辑

该演示在firefox中运行良好，但在chrome中，您会发现生成的圆圈中存在不规则之处

---

感谢@Felix指出这一点。

将.arc代码更改为以下将创建一个完美的圆-该方法的输入似乎有偏差：S

g.arc(505, 505, r2, 0, Math.PI / 360, true);

---

arc

的签名为

arc(x, y, radius, startAngle, endAngle, anticlockwise)

其中

startAngle

和

endAngle

都在。对于一个完整的圆，你想从

0

到

Math.PI*2

-我不知道你从哪里得到的

30

此外，您可能希望尝试

填充（）

您的路径，而不是

笔划（）

用荒谬的线宽填充路径-这与奇怪的

lineCap

和

lineJoin

值相结合，可能是导致结果变形的原因。

如果有人仍然需要这样的东西，请使用“我自己的2美分”arc（）函数的“strokeWidth；”

//10是弧（）的冲程宽度
对于（var i=0；iI）我不明白这应该是一个圆。或者你想画一个吗？不，它实际上是一个圆，而不是一个扇形。删除线g.lineCap='square'；似乎可以it@QuentinUK，我只是在试验不同的线帽，如方形、对接和圆形，但这不行。可以使用
g.arc创建一个完整的圆（505，505，r2，0，2*Math.PI，true）；
例如，有足够的例子说明这一点。
弧方法的参数是：
弧（x，y，半径，星形，端角，逆时针）
。请参见。即使是
Math.PI/360
对我来说也毫无意义-正如另一位评论员所发布的，似乎是
2*Math.PI
只改变了圆的起始角和结束角，但没有改变圆的外圆，它看起来仍然像是一个多面多边形。@tomariator没有ci这样的东西计算机科学中的rcle——实际上，所有的圆都是多面多边形，因为分辨率和精度是有限的。如果有办法改变多面多边形中的边数，就可以画出更完美的圆。
arc(x, y, radius, startAngle, endAngle, anticlockwise)