Canvas API

<canvas> 요소는 HTML 페이지에서 비트맵 영역을 정의합니다.

Canvas API는 JavaScript가 캔버스에 그림을 그릴 수 있게 합니다.

Canvas API는 모양, 선, 곡선, 사각형, 텍스트, 그림, 색상, 회전, 투명도 및 다른 픽셀 연산을 그리는 데 사용할 수 있습니다.

Canvas를 HTML에 추가

HTML 페이지의 어디서든 <canvas> 요소를 추가할 수 있는 <canvas> 태그를 사용할 수 있습니다：

인스턴스

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

자신이 직접 시도해보세요

Canvas 요소에 접근하는 방법

HTML DOM 메서드 getElementById()를 사용하여 <canvas> 요소에 접근할 수 있습니다：

const myCanvas = document.getElementById("myCanvas");

화면에 그리기 위해 2D 컨텍스트 객체를 생성해야 합니다:

const ctx = myCanvas.getContext("2d");

메모

HTML <canvas> 요소 자체에는 그리기 기능이 없습니다.

모든 그래픽을 그리기 위해 JavaScript를 사용해야 합니다.

getContext() 메서드는 그리기 도구(메서드)를 포함한 객체를 반환합니다.

화면에 그리기

2D 컨텍스트 객체를 생성한 후, 화면에 그림을 그릴 수 있습니다.

아래의 fillRect() 메서드는 왼쪽 상단 위치 20,20에 위치하는 150픽셀 너비와 100픽셀 높이의 검은색 사각형을 그립니다:

인스턴스

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

자신이 직접 시도해보세요

색상 사용

fillStyle 속성은 그리기 객체의 채우기 색상을 설정합니다:

인스턴스

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

자신이 직접 시도해보세요

또한 document.createElement() 메서드를 사용하여 새로운 <canvas> 요소를 생성하고, 이 요소를 현재 HTML 페이지에 추가할 수 있습니다:

인스턴스

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

자신이 직접 시도해보세요

경로

화면에 그리기의 일반적인 방법은 다음과 같습니다:

1. 경로 시작하기 - beginPath()
2. 점으로 이동하기 - moveTo()
3. 경로에 그리기 - lineTo()
4. 경로 그리기 - stroke()

인스턴스

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

자신이 직접 시도해보세요