JavaScript로 픽셀 기반 그림을 그리는 canvas를 배웁니다.
canvas 요소는 그림을 놓을 빈 도화지를 만들고 실제 선, 도형, 텍스트는 JavaScript의 2D context로 그립니다. 확대하면 픽셀이 보일 수 있으며 그린 도형은 개별 DOM 요소가 아닙니다.
Canvas은 JavaScript가 브라우저 기능을 호출하고 결과와 실패를 처리하는 강좌입니다. 먼저 변수, 함수, 이벤트, DOM 기초를 익힌 뒤 학습하세요.
먼저 현재 결과를 확인한 뒤 사각형의 색과 위치, 원의 반지름을 바꿔보세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
CSS로 canvas 크기만 늘리면 내부 해상도와 달라져 그림이 흐려질 수 있습니다. width와 height 속성도 맞추세요.
직접 바꿔보세요사각형의 색과 위치, 원의 반지름을 바꿔보세요.