3. 아날로그 시계 - w3schools 예제 분석 II

마지막으로 시계 바늘(Clock Hands)을 구현한다.

전체 코드는 여기에서 확인할 수 있고

주요 부문에 대한 자바스크립트 코드는 다음과 같다.

function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); }

현재 시각(Date)을 구한 뒤

시간, 분, 초로 나누어서

변수(hour, minute, second)에 저장한다.

코드는 시간, 분, 초의 순서로 작성했지만

코드가 초, 분, 시간 순서로 복잡해 지기 때문에

쉬운것 부터 정리한다.

먼저 초(second)는

최대값이 60으로

1초당 360도를 60 등분한 만큼씩(1초=6도) 이동하면 된다.

즉, X * 360 / 60 이 공식이 되고

라디안으로 바꾸면

X * (PI * 2) / 60 = X * PI / 30 이 된다.

즉 초당 X * PI / 30 씩 각도를 바꾸어(rotate) 주면 된다 [라인 14].

정리하면, 1초에 6도씩 움직인다는 것이다.

(2초면 12도, 3초...)

다음으로 분(minute)도

최대값이 60으로

1초당 360도를 60 등분한 만큼씩 이동하기 때문에

X * PI / 30 로 계산해 주면 된다 [라인 11].

다만, 1분은 60초로 구성되고

초가 흐른 만큼 분을 표시할 각도에 추가해 주어야 한다.

이 크기는 아주 적지만 포함 할수록 정확한 각도가 나오게 된다.

(분에서는 처리하지 않아도 구별하기 힘들지만 시간 처리에서는 중요)

앞서의 초에 대한 공식에서

전체 각도 360 (PI *2)을 60으로 나누었지만

분 단위 처리에서는 1분에 대한 초를 처리하는 것이라

1분이 가는 각도(6도)를 1/60초씩 증가해야 한다.

따라서, 좀더 정확한 분의 각도를 계산하기 위해서는

다음과 같은 공식이 추가되어야 한다.

1분이 가는 각도 * S * 1 / 60

= (1 * PI / 30) * (S * 1 / 60)

= S * PI / (30 * 60)

즉, 다음과 같이

분의 각도는 분 + 초의 각도가 된다 [라인 11].

(minute*PI/30) + (second*PI/(30*60)

마지막으로 시간은(hour)은

최대값이 12로

1 시간당 360(PI*2)도를 12 등분한 만큼씩 이동하기 때문에

H * PI / 6 (1시간=30도)으로 계산해 주면 된다 [라인 8].

다만, 시간도 보다 정확한 각도를 계산하기 위해

현재의 분과 초에 대한 각도를 추가해 주면 된다.

시간에 대한 분은

1 시간이 가는 각도 * M * 1 / 60

= (1 * PI / 6) * (M * 1 / 60)

= M * PI / (6 * 60)

초 계산이 앞서 분에 대한 초와 조금 차이가 있다.

여기서는 시간에 대한 분에 대한 초로 계산해야 한다.

즉, 1시간에 대한 분의 각도를 1/60으로 나누어

주어진 초만큼 증가 시켜야 한다.

즉,

1 시간에 대한 1분이 가는 각도 * S * 1 / 60

= M(=1) * PI / (6 * 60) * (S * 1 / 60)

= S * PI / ( 6 * 60 * 60)

정리하면

1시간이 가는 각도 * 현재 시간

+ 1시간에 가는 각도 / 60 * 현재 분

+ 1시간에 가는 각도에서 1분이 가는 각도 / 60 * 현재 초

로 계산하여 [라인 8]

=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60))

로 프로그램 코드를 작성하였다.

이렇게 계산된 각도에 따라서

drawHand 함수를 호출해서 시각을 표시한다.

function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); }

drawHand 함수는 지정된 각도(pos)에

시간과 분은 굵게 (radius*0.07)

초는 가늘게 (radius*0.02) 선을 긋는다 (width).

선의 길이(length)는

시간(radius*0.5), 분 (radius*0.8), 초 (radius*0.9)

순으로 길게 그려준다.