HTML5 Canvasのarc()メソッド：円弧の開始角度と終了角度を徹底解説

HTML5のCanvasで円弧を描画する際に使用するarc()関数は、開始角度（startAngle）と終了角度（endAngle）を指定することで、任意の範囲の弧を描くことができます。まずは関数の定義を見てみましょう。

arc()関数の基本構文

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

このメソッドは以下のパラメータを受け取ります。

各パラメータの説明

• x, y：円の中心座標を指定します。
• radius：円の半径を指定します。
• startAngle / endAngle：円弧の開始点と終了点の角度をラジアンで指定します。角度は水平方向、つまりx軸（3時の方向）を基準として測定されます。
• anticlockwise：真偽値（Boolean）です。trueを指定すると反時計回りに円弧が描画され、falseまたは省略した場合は時計回りに描画されます。

ラジアンでの角度指定のポイント

startAngleとendAngleは度数法ではなくラジアンで指定する必要がある点に注意してください。例えば、0ラジアンは右方向（x軸の正の方向）、π/2ラジアンは下方向、πラジアンは左方向、3π/2ラジアンは上方向を表します。度数法からラジアンへの変換は「度 × Math.PI / 180」で行えます。

使用例

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 時計回りに半円を描画
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI, false);
ctx.stroke();

// 反時計回りに4分の1円を描画
ctx.beginPath();
ctx.arc(250, 100, 50, 0, Math.PI / 2, true);
ctx.stroke();

このように、開始角度と終了角度の組み合わせ、そしてanticlockwiseパラメータの指定によって、同じ中心・半径でもまったく異なる形状の円弧を自由に描き分けることができます。