Canvas API 3 - 캔버스에 원 그리기

MDN + 기타 자료들을 공부하며 이해한 내용을 정리한 글입니다.

곡선을 그릴 줄 알아야, 원도 그리고 원으로 만들 수 있는 많은 것들을 그릴 수 있다. 그 기본은 호를 그리는 것이다.

arc()

캔버스 <canvas>에 원을 그릴 때 사용되는 메소드이다. context 는 '2D'이다.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

(x, y)위치에 원점을 두면서, 반지름 r을 가지고, startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향(mdn 설명이 좀 어려운데, 시계방향으로 호를 그릴지 아니면 반시계방향으로 그릴지를 넣는 값으로, boolean 타입이며 기본값은 시계방향이다.)으로 가는 호를 그리게 된다.

여기서 어려웠던 개념이 startAngle 과 endAngle 인데, 여기 들어가는 값은 각이 아니라 라디안 값이다.

라디안 값이란?

흔히 우리가 생각하는 각은 45도, 60도 로 표현하는 '60분법 도'단위이다. 그러나 각을 나타내는 또 다른 단위가 있는데, 원의 반지름에 대한 호의 길이의 비로 정의하는 라디안 단위이다.

라디안을 더 알아보기 전에, 파이 PI 개념에 대해 짚고 넘어가야 한다.

파이 (π) 는 원의 지름 대비 원의 둘레의 비율이다. 원의 지름 길이와 상관없이 그 비율은 동일한 3.14159.. 이기 때문에 상수이다. javascript 에서는 Math.PI로 호출할 수 있다.

다시 라디안으로 돌아와서, 지름은 원의 한 쪽 끝에서 원을 관통하여 반대 끝으로 뻗어진 직선이다. 원 안에서 180도로 원 중앙을 관통하는 직선을 호도법으로 각을 재보면 180도이다. 아까 파이 개념을 봤을 때, 지름 대비 원의 둘레가 파이이므로, 180도 = 파이 라디안 임을 알 수 있다. (360도 = 2 * 파이 라디안, 90 도 = 파이 / 2 라디안)

Javascript 에서 도 (degree)에서 라디안 (radian)으로 변환하는 공식은 다음과 같다.

1radian = (Math.PI/180)*degrees

arc() 로 간단히 호를 그려봤다.

Reference

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-angular-movement/a/angles-and-units