2025-01-26T02:57:06

doc/15_Canvas_API.md

@@ -0,0 +1,70 @@
+# Canvas API
+
+Canvas API는 HTML5에서 제공하는 API로, 웹 페이지에 2차원 그래픽을 그릴 수 있도록 해주는 강력한 도구입니다.
+
+## 주요 기능
+* 2D 그래픽 그리기: 선, 도형, 이미지 등을 자유롭게 그릴 수 있습니다.
+* 텍스트 렌더링: 다양한 글꼴과 스타일로 텍스트를 표현할 수 있습니다.
+* 이미지 처리: 이미지를 로드하고 조작하여 새로운 이미지를 생성할 수 있습니다.
+* 애니메이션: setInterval이나 requestAnimationFrame 함수와 함께 사용하여 부드러운 애니메이션을 구현할 수 있습니다.
+* 상호 작용: 마우스, 터치 이벤트를 감지하여 사용자와 상호 작용하는 기능을 구현할 수 있습니다.
+
+## 사용 방법
+1. HTML에 캔버스 요소 추가
+    ```html
+    <canvas id="myCanvas" width="300" height="150"></canvas>
+    ```
+2. JavaScript에서 캔버스 요소 가져오기
+    ```javascript
+    const canvas = document.getElementById('myCanvas');
+    ```
+3. 2D 렌더링 컨텍스트 얻기
+    ```javascript
+    const ctx = canvas.getContext('2d');
+    ```
+    * getContext('2d') 메서드를 사용하여 2D 렌더링 컨텍스트를 얻습니다.
+    * 이 컨텍스트를 통해 다양한 그리기 메서드를 호출하여 캔버스에 그림을 그릴 수 있습니다.
+4. 그리기
+    ```javascript
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(10, 10, 100, 50); // 파란색 사각형 그리기
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2); // 원 그리기
+    ctx.stroke();
+    ```
+
+## 경로 관련
+* beginPath(): 새로운 path를 시작합니다.
+* moveTo(x, y): 펜의 위치를 이동시킵니다.
+* lineTo(x, y): 현재 위치에서 지정된 좌표까지 선을 그립니다.
+* closePath(): 현재 path를 닫습니다.
+* arc(x, y, radius, startAngle, endAngle): 원을 그립니다.
+* fill(): 현재 path를 채웁니다.
+* stroke(): 현재 path의 테두리를 그립니다.
+
+## 스타일
+* fillStyle: 채우기 색상을 설정합니다.
+* strokeStyle: 선 색상을 설정합니다.
+* lineWidth: 선의 두께를 설정합니다.
+* lineCap: 선의 끝 모양을 설정합니다 (butt, round, square).
+* lineJoin: 선이 만나는 부분의 모양을 설정합니다 (miter, round, bevel).
+
+## 텍스트
+* fillText(text, x, y): 지정된 위치에 텍스트를 채워서 그립니다.
+* strokeText(text, x, y): 지정된 위치에 텍스트의 윤곽선을 그립니다.
+* font: 폰트 스타일을 설정합니다.
+
+## 이미지
+* drawImage(image, dx, dy): 이미지를 캔버스에 그립니다.
+* createPattern(image, repetition): 이미지를 패턴으로 만들어 채우기나 선 그리기에 사용합니다.
+
+## 변환
+* translate(x, y): 캔버스 좌표계의 원점을 이동시킵니다.
+* rotate(angle): 캔버스를 회전시킵니다.
+* scale(x, y): 캔버스를 확대 또는 축소합니다.
+
+## 그 외
+* clearRect(x, y, width, height): 지정된 영역을 지웁니다.
+* save(): 현재 캔버스 상태를 저장합니다.
+* restore(): 저장된 상태로 복원합니다.
+