javascript-examples/doc/15_Canvas_API.md

Canvas API

Canvas API는 HTML5에서 제공하는 API로, 웹 페이지에 2차원 그래픽을 그릴 수 있도록 해주는 강력한 도구입니다.

주요 기능

• 2D 그래픽 그리기: 선, 도형, 이미지 등을 자유롭게 그릴 수 있습니다.
• 텍스트 렌더링: 다양한 글꼴과 스타일로 텍스트를 표현할 수 있습니다.
• 이미지 처리: 이미지를 로드하고 조작하여 새로운 이미지를 생성할 수 있습니다.
• 애니메이션: setInterval이나 requestAnimationFrame 함수와 함께 사용하여 부드러운 애니메이션을 구현할 수 있습니다.
• 상호 작용: 마우스, 터치 이벤트를 감지하여 사용자와 상호 작용하는 기능을 구현할 수 있습니다.

사용 방법

1. HTML에 캔버스 요소 추가

   <canvas id="myCanvas" width="300" height="150"></canvas>
   

2. JavaScript에서 캔버스 요소 가져오기

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

3. 2D 렌더링 컨텍스트 얻기

   const ctx = canvas.getContext('2d');
   

   • getContext('2d') 메서드를 사용하여 2D 렌더링 컨텍스트를 얻습니다.
   • 이 컨텍스트를 통해 다양한 그리기 메서드를 호출하여 캔버스에 그림을 그릴 수 있습니다.
4. 그리기

   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(): 저장된 상태로 복원합니다.