[JS] Canvas

1. 기본 구조

1) Attribute

• width (default = 300)
• height (default = 150)
• id, class

2) 특징

• <img>와 비슷한데, alt와 src 속성은 없다.
• css style은 <canvas>에 그려지는 이미지에는 영향을 주지 않는다.
• <video>, <audio>, <picture> 처럼 오래된 브라우저를 위한 대체 컨텐츠를 지원한다.
• 대체 컨텐츠를 지원하므로 닫는 태그(</canvas>)가 필요하다.

<!-- 기본 구조 -->
<canvas id="canvas1" width="150" height="150"></canvas>

<!-- 대체 컨텐츠 선언한 경우 -->
<canvas id="canvas1" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

2. getContext()

<canvas> 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다.

1) 랜더링 컨텍스트를 생성하는 이유

• 캔버스에 무언가를 그리려면, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 선언해야 한다.
• getContext() 메서드는 랜더링 컨텍스트와 함수들을 반환한다.

2) 파라미터 - contextType

• "2d" : 2차원 렌더링 컨텍스트 생성
• "webgl": 3차원 렌더링 컨텍스트 생성

3) 특징

• 여러 랜더링 컨텍스트를 얻으려면, 동일한 <canvas>에서 다른 contextType을 전달하거나 다른 <canvas>에서 getContext()를 호출

// 기본 구조 const _ctx = canvasElement.getContext(contextType);

const $canvas = document.querySelector('#canvas1');
const _ctx = $canvas.getContext('2d');

4) Context 객체

도형 그리기

• fillRect(x, y, width, height): 색칠된 직사각형 그리기
• clearRect(x, y, width, height): 직사각형 윤곽선 그리기
• strokeRect(x, y, width, height): 특정 부분 삭제

도형 설정

• fillStyle: 도형을 채우는 색, string
• strokeStyle: 도형의 윤곽선 색, string
• imageSmoothingEnabled: 도형을 확대했을 때, 깨진 픽셀을 흐리게 처리할 건지 설정, boolean

글자 설정

• font: 글자를 그릴 때 사용되는 현재 글자 스타일, string,"크기 스타일"
• fillText("text", x, y): 문자열(text)를 정해진 위치(x, y)에 출력
• textBaseline: 베이스 라인 설정, string (ex. "top", "hanging");
• strokeText("text", x, y): 테두리 있는 문자열(text)를 정해진 위치(x, y)에 출력

---

출처
MDN - Canvas
MDN - getContext
MDN - Canvas/텍스트 그리기
MDN - Canvas/도형 그리기