Canvas API
웹 브라우저 안의 디지털 도화지
Canvas API는 자바스크립트를 사용하여 웹 페이지에 그래픽이나 애니메이션을 렌더링할 수 있게 해주는 기능입니다.
SVG가 수학 공식을 이용해 그려지는 '벡터(Vector)'라면, Canvas는 픽셀 하나하나에 색을 칠하는 '비트맵(Bitmap)' 방식입니다. 초당 60프레임으로 수많은 객체의 위치를 다시 그려야 하는 웹 게임이나 복잡한 파티클 애니메이션을 구현할 때 매우 빠르고 강력한 성능을 발휘합니다.
SVG가 수학 공식을 이용해 그려지는 '벡터(Vector)'라면, Canvas는 픽셀 하나하나에 색을 칠하는 '비트맵(Bitmap)' 방식입니다. 초당 60프레임으로 수많은 객체의 위치를 다시 그려야 하는 웹 게임이나 복잡한 파티클 애니메이션을 구현할 때 매우 빠르고 강력한 성능을 발휘합니다.
1. "도화지와 마법의 붓" (비유)
🖼️
<canvas> 요소 (도화지)
HTML에 정의된 캔버스 태그는 아무것도 그려져 있지 않은 빈 도화지(공간) 역할만 합니다. 스스로 그림을 그릴 수 없습니다.
🖌️
Context (마법의 붓)
getContext('2d')를 통해 얻는 객체입니다. 이 붓을 자바스크립트로 조종하여 선 굵기, 색상, 좌표를 설정하고 도화지에 그림을 그립니다.
2. Canvas 좌표계 (좌상단 원점)
3. Context (붓) 핵심 메서드
| 속성 및 메서드 | 설명 |
|---|---|
fillStyle / strokeStyle |
도형의 내부를 채우는 색상(fill)과 테두리의 색상(stroke)을 지정합니다. css의 색상 문자열을 그대로 사용합니다. |
fillRect(x, y, w, h) |
지정된 좌표 (x, y)에서 시작하여 너비 w, 높이 h만큼의 색이 채워진 사각형을 한 번에 그립니다. clearRect()는 특정 영역을 투명하게 지웁니다. |
beginPath() |
새로운 그림(경로)을 시작하겠다고 선언합니다. 이전 도형과 선이 이어지는 것을 방지합니다. |
arc(x, y, r, startAngle, endAngle) |
원이나 호를 그리기 위해 경로를 추가합니다. 각도는 무조건 라디안(Radian)을 사용하며 완전한 원은 Math.PI * 2 입니다. 경로를 추가한 후 마지막에 fill() 이나 stroke()를 호출해야 화면에 나타납니다. |
<div class="canvas-app">
<div class="header">
<h2>Canvas 애니메이션</h2>
<p>클릭하면 파티클이 생성됩니다!</p>
</div>
<div class="canvas-container">
<canvas id="myCanvas"></canvas>
</div>
<div class="controls">
<span id="particleCount">Particles: 0</span>
<button id="clearBtn">화면 지우기</button>
</div>
</div>