2. 아날로그 시계 - w3schools 예제 분석 I

시계의 외곽선을 그리고 나면

외곽선 안쪽에 1부터 12까지의 숫자를 배치해야 한다.

w3schools 의 숫자 출력 부분을 보면(3단계)

위치 이동을 이용하여 출력하는

다음과 같은 자바스크립트 코드를 볼 수 있다.

function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + "px arial"; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num= 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); } }

변수 radius 는 반지름을 의미한다.

첫 예제인 1단계 코드를 보면

주어진 Canvas 크기의 반으로 지정된 것을 볼 수 있다.

var radius = canvas.height / 2;

이 예제의 특징이 Canva의 크기에 따라

시계의 크기도 바뀌게 작성되어

시간을 표시하는

숫자의 폰트는 반지름의 15% 크기이고, (radius*0.15)

시간을 출력하는 위치는

중앙으로 부터 반지름의 85% 되는 부분이다. (radius*0.85)

위 코드의 4라인과 10라인을 보면 된다.

가장 중요한 코드가 8~11라인인데

몇가지 개념에 대해서 알아야 한다.

먼저, 12개의 숫자를 하나의 원안에 표시하기 위해서는

간단하게 생각해서 360도의 각도를 12로 나누어서 위치를 지정하면 된다.

즉, 각 숫자는 360 / 12 (30) 도씩 증가하면된다.

그런데, 자바스크립트에서는 각도를 사용하지 않고 라디안(Radian)을 사용한다.

라디안에서는 360도가 아니라 2파이(PI*2)를 사용한다.

따라서 각 숫자는 PI * 2 / 12 씩 증가하면 된다.

즉, 8라인에 작성된 코드와 같이

각 숫자가 배열될 위치는 숫자 * PI / 6의 공식이 나오게 된다 [라인 8].

두번째 개념은 Canvas의 translate함수에 대해서 이해를 해야 한다.

여기서는 다루지 않았지만,

단계 1의 시계 외곽선 그리기에서 translate가 사용되었다.

translate는 기준 좌표를 지정된 위치로 바꾸는 함수이다.

앞서, 단계 1과 2에서 3개의 원을 그렸는데

그리기 전에 Canvas의 중앙(radius, radius)으로 기준 좌표를 이동 시켜두었다.

ctx.translate(radius, radius);

이렇게 기준점을 이동시킨후

기준점을 중심으로 반지름이 radius인 각 원들을 그린 것이다.

Canvas의좌표는

다음 그림과 같이 좌측 상단이 시작 좌표로 0, 0으로 표기한다.

만약 반지름이 200인 경우

현재 기준점은 translate을 이용하여 변경한 후이기 때문에

200, 200으로 바뀌어 있다.

이 상태에서 시간을 나타내는 숫자를 표시하는데

1시는 중앙에서 우측으로 1 * PI / 6 라디안에

기준에서 - 200 * 0.85 (- radius*0.85)의 거리에 출력한다 [라인 10].

여기서 위치에 마이너스(-) 처리가 된 이유는

1시는 기준점 보다 위에 있기 때문이다.

기준점보다 위에 있다는 것은

기준점은 Y가 0 이니 마이너스가 되어야 찾아 갈 수 있다.

다음 그림에서

첫 번째 그림이 Canvas의 2차원 좌표이다.

Canvas 좌표는 좌측 상단이 0, 0으로 기준점이 된다 (첫번째 그림).

이 기준점은 translate 함수를 이용하여

특정한 좌표로 이동시킬 수 있다 (두번째 그림).

기준점은 X와 Y가 만나는 곳이 되고

기준점은 항상 0, 0 이 된다.

따라서, Y축이 기준점보다 위로 가면 음수(-) 값을

Y축이 기준점보다 아래로 가면 양수(+) 값을 가지게 된다.

세번째 그림과 같이 1시 방향에 숫자 1을 찍기 위해서

좌표 축을 30 ( 1 * PI / 6)도 기울이고,

(30도는 30/180 즉 1/6이고, 라디안으로 pi /6을 의미)

Y축 값을 음수(- radius*0.85)로 지정해야 된다.

그림을 보면 X축의 값은 변경하지 않아도 된다.

즉, 0.

1시 방향 (30도, pi /6)에 숫자 1을 찍기 위해서

축을 30도 회전시키기 위해 roate함수를 사용하고 [라인 9]

숫자가 출력될 부분으로 이동(translate) 한다 [라인 10].

다음 그림과 같이 기준점이 이동하게 된다.

이 상태에서 숫자를 출력하면

그림과 숫자가 같이 기울어진 상태에서 출력된다.

따라서, 다음 그림과 같이

앞서 지정한 각도를 음수화(-ang)해서 직각이 되게 한다.[라인 11]

이렇게 회전(+), 이동(-), 역회전(-)을 하여

각 숫자별 위치를 잡아서 출력을 하고

회전(-), 이동(+), 역회전(+)을 하여

화면 중앙으로 돌아와서

다음 숫자를 출력할 준비를 한다.

이렇게 12번을 반복하면 된다.

다시 정리하면

1. 시간에 따른 각도(라디안) 만큼 회전
2. 출력하기 위한 위치로 이동, Y축만 변경(마이너스)
3. 시간을 직각으로 출력하기 위해 회전한 각도를 반대로 회전(마이너스)
4. 숫자 출력
5. 시간을 직각으로 출력하기 위해 반대로 회전한 각도를 정상으로 회전: 3 번 반대
   
6. 변경한 Y축 값을 양수로 지정하여 중앙 기준점으로 되돌아옴: 2 번 반대
   
7. 회전한 시간 방향을 12시 방향으로 재 회전(마이너스): 1 번 반대

1 번 부터 3 번을 진행하며

시간이 출력될 위치에 숫자를 출력하고

5 번 부터 7 번까지 진행하여

시계 중앙에 기준점을 다시 배치한다.

그래야 다음 시간(숫자)을 시계 중앙에서 출발해서 작성할 수 있기 때문이다.