Canvas로 그리기

개념 이해하기

canvas 요소는 그림을 놓을 빈 도화지를 만들고 실제 선, 도형, 텍스트는 JavaScript의 2D context로 그립니다. 확대하면 픽셀이 보일 수 있으며 그린 도형은 개별 DOM 요소가 아닙니다.

draw는 먼저 clearRect로 캔버스 전체를 지운 뒤, 왼쪽 위 25, 30 지점에서 가로 180, 세로 90인 초록 사각형을 채웁니다. 이어서 중심이 330, 80이고 반지름이 50인 원을 0부터 2π 라디안까지 그려 노란색으로 채우고, 210, 180 위치에 Canvas 글자를 씁니다. 페이지가 열릴 때 draw()가 한 번 실행되고, 다시 그리기 버튼은 같은 함수를 리스너로 다시 부릅니다.

2D context는 상태를 기억합니다. 한 번 지정한 fillStyle과 font는 바꾸기 전까지 이후의 그리기에 계속 쓰이므로 예제도 도형마다 색을 다시 지정하고, 잠깐만 바꿀 설정은 save()로 저장했다가 restore()로 되돌립니다. 또 fillText의 y 좌표는 글자 윗변이 아니라 기본 기준선인 알파벳 기준선의 위치입니다.