HTML DOM 캔버스 객체

<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();

본인이 직접 테스트해보세요