円弧を描く前に、角度とラジアンの概念を理解する必要があります。
角度とラジアン
角度
円の中心から円周に向かって2本の光線が放たれ、ある角度と、その角度に正対する弧を形成します。円弧の長さが円周の360分の1にちょうど等しいとき、2つの光線のなす角の大きさは1度。( 単位：º )
ラジアン
円の中心から円周に向かって2本の光線が放たれ、ある角度と、その角度に正対する円弧を形成します。この円弧の長さが円の半径にちょうど等しいとき、2本の光線のなす角の大きさは1ラジアン（単位はrad）です。具体的な計算式は
radはラジアンの略語です。
角度はラジアンに変換され、計算式は次のようになります：
円弧
円弧は円または円の一部です。
context.arc()
arc() メソッドは、円を作成するために使用される円または部分円を作成するために使用されます。
文法：context.arc(x,y,r,startAngle,endAngle,antiClockwise);
| x | 円の中心のx座標。 |
| y | 円の中心のy座標。 |
| r | 円の半径。 |
| startAngle | ラジアン単位の開始角度。 |
| endAngle | ラジアン単位の終了角度。 |
| antiClockwise | オプション。反時計回りに描画するか時計回りに描画するかを設定します。 |
x と y は円の中心の位置を定義し、r は円の半径、つまり円弧の半径を定義します。
円
例えば、 を中心とし、半径30 の円を描きます：
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.arc(, 30, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.stroke();
context.closePath();
走行結果
ここでは、円の開始角度と終了角度をまずラジアンに変換し、完全な円を作成できるようにします。
円弧
円の始点と終点の角度を変更すると、円弧の一部を描くことができます。例えば、円の3/4を時計回りに描きます。
context.arc(, 30, (Math.PI / 180) * 0, (Math.PI / 180) * 270, false);
走行結果
反時計回りに描くように変更することもできます。この場合、弧は 0 度から 270 度まで反時計回りに描かれます：
context.arc(, 30, 0, (Math.PI / 180) * 270, true);
arcTo()
arcTo()メソッドは、2つの接線間の円弧をキャンバス上に描画するために使用します。
文法：context.arcTo(x1,y1,x2,y2,r);
| x1 | 円弧の始点に接する線の x 座標。 |
| y1 | 円弧の始点に接する線の y 座標。 |
| x2 | 円弧の終点の x 座標。 |
| y2 | 円弧の終点のy座標。 |
| r | 円弧の半径。 |
context.moveTo(20,20); // 始点
context.lineTo(100,20); // 水平線を作る
context.arcTo(0,70,50); //
context.lineTo(); // 垂直線
走行結果
arcTo() 関数は、指定された半径の円弧を描画し、円弧の始点は直線に接し、円弧の終点は点線に接します。
ベジェ曲線
ベッセル曲線はベジエ曲線とも呼ばれ、2次元グラフィックスアプリケーションに適用される数学的な曲線です。ベジエ曲線は線分と節点からなり、節点はドラッグ可能なピボットポイント、線分は伸縮可能な革紐のようなもので、描画ツールに見られるペンツールはこのようなベクトル曲線を作るために使われます。ベジエ曲線はコンピュータグラフィックスにおいて非常に重要なパラメトリック曲線で、PhotoShopのような成熟したビットマップソフトウェアにはベジエ曲線ツールがあります。
パソコンで絵を描く場合、マウスを操作して線の軌跡を把握することがほとんどで、手描きの感覚や効果とは大きく異なります。狡猾なアーティストでさえ、簡単に様々なグラフィックを描くことができますが、マウスを取得し、自由に描画することは容易なことではありません。これは、コンピュータが手作業に取って代わることができないので、人々は非常に無力であることしかできません。ベジェツールの使用は、この欠点を補うためにかなりの程度まで。
ベジェ曲線 ベジェ曲線は、コンピュータグラフィックスによるイメージモデリングの基本ツールで、グラフィックモデリングに最も使用される基本線の1つです。曲線上の4点をコントロールすることでグラフィックを作成・編集します。重要な役割の1つは、曲線の中心に位置する制御線です。この線は仮想的なもので、中央とベジェ曲線の交点、コントロールの両端の端点です。両端の端点を動かすとベジェ曲線の曲率が変わり、中央の点を動かすと、始点と終点がロックされた状態でベジェ曲線が均等に動くようになります。ベジエ曲線のすべての制御点とノードは編集可能です。この「インテリジェント」なベクターラインは、グラフィック編集や創作に理想的なツールをアーティストに提供します。
2乗ベジェ曲線
2乗ベッセル曲線は2次ベッセル曲線としても知られています。二次ベッセル曲線には2つの点が必要です。1点目は2次ベッセル計算で使われる制御点、2点目は曲線の終点です。曲線の始点は現在のパスの最後の点です。したがって、パスが存在しない場合は、beginPath()メソッドとmoveTo()メソッドを使用して最初に始点を定義する必要があります。
文法：context.quadraticCurveTo(cpx,cpy,x,y);
| startAngle | ベッセル制御点のx座標 |
| endAngle | ベッセル制御点のy座標 |
| x | 終点のx座標 |
| y | 終点のy座標 |
context.moveTo();
context.quadraticCurveTo(,);
走行結果
2乗ベッセル曲線は、始点、終点、そして曲線の方向を決める制御点で定義されます。
次ベジェ曲線
次ベジェ曲線は3次ベジェ曲線とも呼ばれます。次ベジェ曲線には3つの点が必要です。最初の2点は3次ベゼルの計算で制御点として使われ、3点目は曲線の終点です。曲線の始点は現在のパスの最後の点です。パスが存在しない場合は、beginPath()メソッドとmoveTo()メソッドを使用して開始点を定義する必要があります。
文法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
| cp1x | 最初のベッセル制御点のx座標 |
| cp1y | 最初のベッセル制御点のy座標 |
| cp2x | 2番目のベッセル制御点のx座標 |
| cp2y | 2番目のベッセル制御点のy座標 |
| x | 終点のx座標 |
| y | 終点のy座標 |
context.moveTo(150,0);
context.bezierCurveTo(0,,,300);
走行結果
次ベッセル曲線には合計4点が必要です。
2次ベジェ曲線と3次ベジェ曲線に加えて、高次のベジェ曲線があります。
4次のベジェ曲線：
5次のベジェ曲線：
4次のベジェ曲線には3つの制御点があり、5次のベジェ曲線には4つの制御点があります。
