Javascript 在HTML5画布上绘制圆圈的3种方法示例

我可以用

ctx.arcTo

方法拼凑出一种画圆的方法，但我很难理解如何应用贝塞尔方程来画椭圆或圆（任意接近一个）

想知道这三种方法在从点a到点b（向外凸出或向内凸出）绘制圆弧（椭圆或圆的一段或全部）时是如何实现的

var canvas=document.querySelector（'canvas'）
var ctx=canvas.getContext（'2d'）
ctx.moveTo（0,0）
arcTo（ctx，100，100，50，50，20，20）
cubicTo（ctx，110，110，10，10，120，120）
四倍频（ctx、210、210、10、10、220、220）
函数ARCTTO（CTX，席，Y1，R1，R2，XF，YF，Bulgin）{
ctx.save（）
ctx.beginPath（）
ctx.moveTo（xi，yi）
ctx.arc（xi、yi、xf、yf、r1）
ctx.closePath（）
ctx.stroke（）
ctx.restore（）
}
函数立方（CTX，席，Yi，R1，R2，XF，YF，Bulgin，近似水平）{
//ctx.bezierCurveTo（cp1x，cp1y，cp2x，cp2y，x，y）
}
函数四元（CTX，席，Y1，R1，R2，XF，YF，Bulgin，逼近水平）{
//ctx.二次曲线（cpx，cpy，x，y）
}

帆布{
背景：#eee；
宽度：200px；
高度：200px；
}

所有这些都基于相同的原理：您可以通过获取圆或椭圆的参数公式（x²+y²=某个常数，x²/a+y²/b=某个常数）并将这些公式的有效点连接起来，来绘制圆或椭圆。以某种方式您可以简单地拾取非常接近的点，因为后续点实际上是“下一个像素”（这是arcTo所做的），因此没有任何“连接”，但您也可以将它们间隔得更远，然后您可以使用以下方法将它们连接起来：

• 线条
• 二次贝塞尔曲线
• 三次贝塞尔曲线
• 从字面上说，任何一种曲线，因为你知道它需要通过的所有点

挑战不在于将各点连接起来，而是在事情开始变得相当糟糕之前知道各点之间的距离有多远

例如，对于二次贝塞尔曲线。少于这个数字，情况开始变得糟糕。对于三次Bezier曲线。对于其他曲线类型，这实际上取决于数学，你或其他人必须计算出数学，以确定需要多少点才能使事情看起来正确

但实际上，如果您使用的编程语言中有圆弧（）和椭圆（）的话，可以使用arcTo，甚至可以使用circle（）和椭圆（）。如果你能直接画出你需要画的东西，不要近似