arcメソッド

メソッド arc は、指定された点を中心とし、指定された半径の円弧を描画します。 この円弧は、メソッド stroke または fill を適用した場合にのみ可視化されます。 前者では輪郭が描かれ、後者では図形が描かれます。

最後のオプションパラメータは描画方向を調整します。 これは true または false の値を受け取ります。値 true は時計回りに円弧を描画し、値 false は反時計回り（デフォルト）に描画します。

描画時、開始角度と終了角度を設定することができます。 これらの角度は度数法ではなく、ラジアンで測定されます。 度数法からラジアンへの変換には、次の関数が使用できます：

javascriptfunction getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

構文

javascriptコンテキスト.arc(x, y, 半径, 開始角度, 終了角度, [方向 = false]);

例

円周を描画してみましょう：

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

function getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Результат:

例

半円を描画してみましょう：

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

function getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Результат:

例

半円の図形を描画してみましょう（ fill を使用して輪郭を塗りつぶします）：

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill();

function getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Результат:

関連項目