준비하기
우선은 기본적인 html과 css를 세팅합니다.
css에서 크기를 지정하지 않는 이유는 아래와 같은 규칙이 적용되기 때문입니다.
👉 크기를 지정하지 않은 canvas는 기본 가로, 세로 300px 150px의 크기를 가진다.
👉 canvas는 화면에 보이는 크기와, 그릴 수 있는 크기가 따로 존재한다.
👉 css에서의 크기는 canvas의 단순 보이는 크기만 변경된다.
👉 canvas의 속성으로 width, height를 변경하는 경우 보이는 크기와 그릴 수 있는 크기 모두 변경된다.
원 그리기
캔버스는 context를 통해 그린다. context와 필요한 값들을 정의합니다.
기본적으로 보이지 않는 path를 먼저 그린 후 색을 채우거나 하는 액션을 합니다.
path를 원을 캔버스의 가운데에 각각의 반지름 만큼 그려줍니다.
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
시침, 분침, 초침 그리기
먼저 바늘 하나를 그릴 함수를 작성해 준다. 캔버스의 가운데에서부터 각 바늘이 위치해 있어야 할 x, y의 좌표값이 들어갑니다.👇
drawHand()
cosθ = x / r, sinθ = y / r
x = cosθ r, y = sinθ r
여기서 θ는 라디안이다. 각을 라디안으로 바꿔줍니다.
1초, 1분은 각 6도. 1시간은 30도
라디안 = 각 * pi / 180
초, 분침과 시침의 길이를 각각 r에 대입합니다.
drawHands()
각 구한 식에 초, 분, 시를 넣어줍니다.
angle의 0은 x축 위에 위치하기 때문에 90도의 라디안인 1.57을 빼고, 중심을 캔버스의 가운데로 이동해 줍니다.
화면에 계속 그려주기
requestAnimationFrame을 이용해 지우고 그려주기를 반복합니다.
window.requestAnimationFrame() 설명
간단하게 시계를 그려봤습니다.
다음 canvas에는 조금 더 어려운 것을 해보도록 합시다!💯
[참고]
