71 lines
3.0 KiB
Markdown
71 lines
3.0 KiB
Markdown
# 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(): 저장된 상태로 복원합니다.
|
|
|