HTML5 Canvas 기초

개요

HTML5 Canvas는 웹 브라우저에서 2D 및 3D 그래픽을 그릴 수 있는 요소입니다. 벡터 그래픽, 이미지, 텍스트를 사용하여 다양한 그래픽을 만들 수 있습니다.

속성

Canvas 요소에는 다음과 같은 속성이 있습니다.

* **width:** 너비 (픽셀)
* **height:** 높이 (픽셀)
* **style:** CSS 스타일 (예: 배경색, 테두리)

메서드

Canvas 요소는 그래픽을 그리는 데 사용할 수 있는 다음과 같은 메서드를 제공합니다.

* **getContext(“2d”)**: 2D 캔버스 컨텍스트를 반환합니다.
* **clearRect(x, y, width, height)**: 지정된 영역을 지웁니다.
* **fillRect(x, y, width, height)**: 지정된 영역을 채웁니다.
* **strokeRect(x, y, width, height)**: 지정된 영역의 테두리를 그립니다.
* **beginPath()**: 새 경로를 시작합니다.
* **closePath()**: 현재 경로를 닫습니다.
* **moveTo(x, y)**: 경로의 시작점을 이동합니다.
* **lineTo(x, y)**: 경로에 직선을 추가합니다.
* **quadraticCurveTo(cp1x, cp1y, x, y)**: 경로에 2차 곡선을 추가합니다.
* **bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)**: 경로에 베지어 곡선을 추가합니다.
* **stroke()**: 경로에 따라 선을 그립니다.
* **fill()**: 경로에 따라 모양을 채웁니다.
* **drawImage(image, x, y)**: 지정된 위치에 이미지를 그립니다.
* **fillText(text, x, y)**: 지정된 위치에 텍스트를 그립니다.
* **measureText(text)**: 지정된 텍스트의 너비를 반환합니다.

사례

다음 예제에서는 Canvas를 사용하여 간단한 원을 그리는 방법을 보여줍니다.

“`html

“`

추가 자료

* [MDN Canvas 문서](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
* [HTML5 Canvas 튜토리얼](https://www.w3schools.com/html/html5_canvas.asp)
* [30 Canvas 예제](https://www.creativebloq.com/web-design/canvas-examples-8133783)