HTML에 정의된 캔버스 태그는 아무것도 그려져 있지 않은 빈 도화지(공간) 역할만 합니다. 스스로 그림을 그릴 수 없습니다.
getContext('2d')를 통해 얻는 객체입니다. 이 붓을 자바스크립트로 조종하여 선 굵기, 색상, 좌표를 설정하고 도화지에 그림을 그립니다.
| 속성 및 메서드 | 설명 |
|---|---|
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>