canvas arc 메서드 원그리기 javascript

canvas arc  메서드 원그리기 javascript

 

설명

arc는 HTML canvas에서 원이나 원호를 그리기 위한 메서드입니다. 이 메서드를 사용하면 원의 중심점, 반지름, 시작 각도 및 끝 각도를 지정하여 원이나 원호를 그릴 수 있습니다. 이 메서드는 아래와 같은 형태로 사용합니다:

javascipt 작성법

ctx.arc(x, y, radius, startAngle, endAngle, [anticlockwise]);

입력갑 설명
x	원의 중심점의 x 좌표
y	원의 중심점의 y 좌표
radius	원의 반지름
startAngle	원호의 시작 각도를 라디안 단위로 지정합니다. 0은 3시 방향을 나타내며, 각도는 시계 반대 방향으로 증가합니다.
endAngle	원호의 끝 각도를 라디안 단위로 지정합니다. 이 각도까지 원호가 그려집니다.
anticlockwise (optional)	true로 설정되면, 원호가 시계 반대 방향으로 그려집니다. 기본값은 false로, 원호가 시계 방향으로 그려집니다.

 

원그리기 예시
원을 그리려면 startAngle를 0으로, endAngle를 2 * Math.PI로 설정하면 됩니다.

2 * Math.PI는 원의 완전한 둘레에 해당하는 라디안 값입니다.

 

See the Pen arc 원그리기 by hyunho (@momalcy) on CodePen.

 

[참고] 라디안 설명

라디안 설명

라디안(radian)은 각도의 측정 단위입니다. 일반적으로 각도는 도(degree) 단위로 표현되지만, 수학과 공학에서는 종종 라디안 단위를 사용합니다. 라디안은 원의 호 길이와 원의 반지름 사이의 비율로 정의됩니다.

라디안과 도 사이의 관계는 다음과 같습니다:
180도 = π 라디안 (π는 원주율, 약 3.14159)
360도 = 2π 라디안