arcメソッド

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

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

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

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

構文

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

例

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

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

let 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;
}

例

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

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

let 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 を使用して輪郭を塗りつぶします）：

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

let 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;
}

arcメソッド

構文

例

例

例

関連項目