JavaScriptでcanvasを使用して円を描画する

次のメソッド arc は、ある点を中心とする円弧を描画します。次のパラメータを受け取ります: x, y, 半径 r, 開始角度 startAngle, 終了角度 endAngle, 時計回りか反時計回りか direction。

パラメータ direction は次の値を受け取ります: true は時計回りに描画し、 false は反時計回りに描画します（デフォルト）。

なお、 arc メソッドの角度は *ラジアン* で測定され、度ではありません。度をラジアンに変換するには、次の関数を使用できます:

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

円を描画しよう

<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();

<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();

<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(); // 輪郭を塗りつぶす