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

같이 보기

직사각형을 그리는 rect 메서드