2.1 Canvas 기본 개념

2.1.1 Canvas 문서 구조

Canvas는 HTML5 요소 중 하나입니다. Canvas는 HTML 문서의 <body> 요소에 추가됩니다. 다음은 <canvas> 요소를 만드는 예시입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300"></canvas>
  </body>
</html>

해당 예제에서 Canvas는 id 속성을 통해 JavaScript로 참조됩니다. 다음은 JavaScript를 사용하여 <canvas> 요소에 대한 참조를 가져오는 예시입니다.

const canvas = document.getElementById('canvas');

2.1.2 Canvas 요소

Canvas는 HTML5 요소 중 하나로, 그래픽 요소를 생성하고 조작할 수 있습니다. Canvas는 다음과 같은 요소를 포함할 수 있습니다.

도형 그리기 (사각형, 원, 다각형 등)
이미지 불러오기
텍스트 쓰기
그림자와 색상 등 스타일 지정
애니메이션 구현

이번 챕터에서는 Canvas가 이런 요소들을 포함하고 있다는 정도만 알아두고 뒤에 나올 챕터들에서 각각의 개념과 사용 방법에 대해서 자세히 살펴보도록 하겠습니다.

2.1.3 Canvas 좌표 시스템

그림 2-1-1

그림 2-1-2

Canvas는 x, y 좌표를 사용하여 요소의 위치와 크기를 결정합니다. 그리고 Canvas의 좌표 시스템은 일반적인 좌표 시스템과는 약간 차이가 있습니다. Canvas의 좌표 시스템에서는 왼쪽 상단 모서리를 (0, 0)으로 기준으로 삼으며, 오른쪽 아래 방향으로 x와 y가 증가합니다. 그리고 x는 가로 방향, y는 세로 방향을 나타냅니다. 예를 들어, Canvas의 크기가 400 X 300인 경우, 왼쪽 상단 모서리의 좌표는 (0, 0)이 되며, 오른쪽 하단 모서리의 좌표는 (400, 300)이 됩니다.