1. 아날로그 시계 개요

자바 스크립트(JavaScript)로 아날로그 시계를 제작하면서

HTML Canvas 사용법과

다양한 방법(2가지)으로 개발하는 것을 경험해 본다.

먼저, w3schools 사이트에 단계별로 구현된 아날로그 시계를 정리하였다.

간단한 설명도 있지만,

초보자에게는 어려움이 있어서 나름의 방법으로 정리해 보았다.

두 번째는 w3schools의 예제를 삼각 함수를 이용해서 구현해 본다.

같은 기능을 다른 방식으로 구현해 보면서 프로그래밍 이해도를 높인다.

w3schools 아날로그 시계 제작은 다음과 같이 총 5단계로 구성되어 있다.

1. 시계처럼 동그라미 그리기

2. 시계의 외곽선 그리기 (외곽선을 그라데이션으로 처리)

3. 시간(숫자) 표시

4. 시계 바늘 표시

5. 시계 작동 시키기

이 글을 읽기 전에

자바 스크립트와 CANVAS의 기초 개념은 알고 있어야 한다.

선(lineto), 도형(arc) 등을 그리는 함수들에 대해서 알고 있다는 전제로 시작한다.

따라서, 시계의 외곽선을 그리는 1, 2 단계는 정리하지 않는다.

5단계는 setInterval 함수로 1초(1000)마다 1부터 4단계까지를 다시 실행하는 것으로

별 내용이 없어 정리하지 않았다.

핵심이 되는 3단계와 4단계를 중심으로 정리하였다.

즉, 적절한 위치에 시간을 표시하고 (3단계)

현재 시간에 맞추어 시, 분, 초를 표시하는 방법을 정리하였다 (4단계).