Canvasの描画線に関する記事で、私は直線を描く方法について話しました。描画曲線に関するこの記事はずっと前に公開されていたはずですが、Canvasの描画曲線は非常に特別なものであるため、まだ把握していないので、段階的に試してみる必要があります。
キャンバスで曲線を描画するのが難しいことの1つは、曲線の4つの機能があることです！それらは、アーク、アーク、クアドラティックな曲線、beziercurvetoです。最もシンプルなARCメソッドから始めましょう。
アークの機能は、通常のアークを描画することです。これは、完全な円または円の特定のアークになります。
アークの構文は次のとおりです。context.arc（x、y、radius、startangle、endangle、anticlockwise）
彼のパラメーターについて説明します
ARC（中央X、中央Y、半径、開始角、終了角、または反時計回りであるかどうか）
ARCで完全な円を描いたらどうすればよいですか？誰もが、パラメーターに開始角度とエンド角があることに気付きました。開始角度が0で、終了角が360の場合、完璧な円ではありませんか？
正しい解決策！しかし、ここの角度はラジアンで表されることに注意する必要があります（そしてフラッシュもそうです）。完全な円は360度で、2PIラジアンです。
だから私たちはこれを書きます：ctx.arc（400,400,20,0、math.pi*2）;
ctx.fill（）;
ctx.stroke（）;
Linetoと同様に、ARCは描画する道でもあるため、その背後にある塗りつぶし方式またはストローク法を呼び出して、図を表示する必要があります（図では赤いストロークスタイルと半透明の赤い塗りつぶしが使用されています）。
次に、1/4円を描画しましょう。角度は90度です。前述のように、360度の角度は2piラジアンで、10度の角度は2pi/360 = pi/180ラジアン、90度は2pi/360*90 = pi/2ラジアンです（自分で他の角度を計算してください）。
ctx.arc（400,400,20,0、math.pi*2/4）;
図から、ARCの0度は数学で一般的に使用される0度であるが、デフォルトでは角度が時計回りに開かれることを判断できます。
しかし、その前に、それが反時計回りであるかどうかを決定するパラメーターはありませんか？彼を真実に設定してみませんか？
ctx.arc（400,400,20,0、math.pi*2/4、true）;
角度が反時計回りになり、アークが360-90 = 270度になることがわかります。
しかし！注意すべきことの1つは、出発点とエンドポイントの計算方法が常に0度に基づいて時計回りに伸びていることであり、シスコと反対が真であると言っていることはありません。反時計回りは、アークの方向にすぎません。
これにより、混乱が行き来するだけでなく、計算が容易になります。
ただし、反時計回りの柔軟な使用が便利な場合があります。
上記の例では、開始角度は0です。ここで、90度などの他の開始角度を試してみましょう。
ctx.arc（400,400,20、math.pi*2/4、math.pi*2+math.pi）;
出発点が90度で、エンドポイントが90度である場合、その結果、何も描くことができないため、エンドポイント角度を180度に変更し、最後に下の図になりました。
質問：0度以外の出発点から完全な円を描く場合、大丈夫ですか？もちろん、アークのエンドポイントを360度 +開始角に設定する限り、次のように可能である限り、それも可能です。ctx.arc（400,400,20、math.pi*2/4、math.pi*2+math.pi*2/4）; //開始点は90度、エンドポイントは360+90度です
ただし、このアプローチは純粋にトラブルなしでトラブルを見つけることの問題であり、普通の人はそれを使用しません。
概要：CanvasのARCメソッドは通常のアークを描画することであり、通常のアークしか描画できず、S字型などの他の奇妙なアークを描くことはできません。