[canvas] arc 원호 그리기

이제 곡선을 그려보도록 하겠습니다.

곡선중에서 원호를 그려보도록 하겠습니다.

그리는 방식은 선을 그리는 방식과 유사합니다.

beginPath(), arc(), stroke() 메서드를 사용하고 넓이와 색깔은 line에서 적용했던 방식과 같습니다.

이제 아래 그림을 보고 설명하겠습니다.

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

arc()메서드의 x와 y는 중심점을 나타 냅니다.

radius는 호의 반지름을 나타냅니다.

그리고 startAngle과 endAngle은 호의 시작점과 끝점을 나타냅니다.

위 그림에서 원 모양의 4방향에 숫자가 있습니다.

오른쪽은 0PI 아래는 0.5PI 왼쪽은 1PI 위쪽은 1.5PI로 표시되어 있습니다.

즉 0PI에서 2PI사이의 수치로 시작점과 끝점을 나타냅니다.

아래는 이해를 돕도록 startAngle과 endAngle을 받아 그려보도록 만들어 봤습니다.

직접 수치를 넣어보면 이해가 쉬울 것 입니다.

그리고 마지막 counterClockwise는 반전되는 효과를 나타냅니다.

아래 예를 실행시켜보면 이해가 쉬울 것 입니다.

startAngle :
endAngle :
counterClockwise :

원호에 대한 이해가 된것으로 보고 원호를 그리고 소스코드를 살펴보겠습니다.