html 怎么在画布上绘制一个圆,javascript – 如何在画布上画一个圆圈？

我使用

javascript和画布绘制一个数学设计的尺度(用于测量扭矩,包括牛顿米和英尺磅).我已经用三角法来定位我的刻度,自然地用弧线绘制电弧线.问题来了,当他们需要排队,但有一些奇怪的失真.然后我绘制了一个非常大的圆圈,并将其与GIMP中的圆形选择进行了比较,并发生了扭曲.圆圈围绕圆圈每45度一致,但是在这些节点之间,画布绘制的圆圈向外偏离,非常像可以向外圆得太远以近似圆的八边形.

为什么会发生这种扭曲？如何在画布上画一个圆圈？

这是我用来产生我扭曲的圈子的代码.

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.beginPath();

context.arc(4000, 4000, 3200, 0, Math.PI*2, false);

context.lineWidth = 1;

context.strokeStyle = '#ff0000';

context.lineCap = 'square';

context.stroke();

这可能不是最小的,我不知道context.lineCap的相关性,但它是基于这个代码的遗迹.

以下屏幕截图显示了GIMP绘制的圆与Chrome绘制的圆之间的区别