HTML Canvas – 튜토리얼

HTML Canvas 소개

Canvas는 HTML5에서 도입된 요소로, 웹 페이지에 그래픽을 그리는 데 사용한다. Canvas는 JavaScript와 함께 사용하여 웹 페이지에 다양한 그래픽 요소를 동적으로 생성할 수 있다.

Canvas란 무엇인가?

Canvas는 HTML5의 요소 중 하나로, 웹 페이지에서 그래픽을 그릴 수 있는 컨테이너 역할을 한다.

<canvas> 태그는 그래픽을 그리기 위한 컨테이너일 뿐이며, 실제로 그래픽을 그리려면 JavaScript를 사용해야 한다.

Canvas는 기본적으로 테두리가 없으며 내용도 없다. 크기는 width와 height 속성을 통해 지정할 수 있다.

<canvas id="myCanvas" width="200" height="100"></canvas>

기본적으로 <canvas> 요소는 다음과 같이 표시된다:

Canvas 브라우저 지원

HTML5 Canvas는 현재 모든 주요 브라우저에서 지원한다: Chrome, Edge, Firefox, Safari, Opera

Canvas 대체 콘텐츠 추가하기

오래된 브라우저나 Canvas를 지원하지 않는 브라우저를 위해 <canvas> 요소 내부에 대체 콘텐츠를 제공해야 한다.

<canvas id="myCanvas" width="200" height="100">

  브라우저가 캔버스를 지원하지 않습니다.

</canvas>

JavaScript로 Canvas 사용하기

Canvas에 그래픽을 그리려면 JavaScript를 사용해야 한다. 먼저 HTML 문서에서 <canvas> 요소를 찾고, 완전한 2D 또는 3D 드로잉 기능을 제공하는 렌더링 컨텍스트 객체를 얻는다.

getContext() 메소드는 렌더링 컨텍스트 타입을 지정하는 매개변수를 사용한다. 2D 그래픽을 그리기 위해서는 “2d”를 사용한다.

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

Canvas 활용 예제

1. 사각형 그리기

fillStyle 속성은 채우기 색상을 설정하고, fillRect() 메소드는 좌표와 크기를 지정하여 사각형을 그린다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(20, 20, 150, 100);

2. 선 그리기

선을 그리려면 다음 단계를 따른다:

1. moveTo(x,y): 시작점을 지정
2. lineTo(x,y): 선의 끝점을 지정
3. stroke(): 실제 선을 그림

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(200, 100);

ctx.stroke();

3. 원 그리기

원을 그리기 위해서는 arc() 메소드를 사용한다.

arc() 메소드의 매개변수는 다음과 같다:

• x: 원의 중심 x 좌표
• y: 원의 중심 y 좌표
• r: 원의 반지름
• startAngle: 시작 각도(라디안)
• endAngle: 종료 각도(라디안)
• counterclockwise: 방향(기본값: false)

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95, 50, 40, 0, 2 * Math.PI);

ctx.stroke();

4. 텍스트 그리기

Canvas에서 텍스트를 그리는 방법에는 두 가지가 있다:

• fillText(text, x, y): 채워진 텍스트
• strokeText(text, x, y): 텍스트 윤곽선

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Hello World", 10, 50);

5. 그라디언트

Canvas에서 그라디언트를 생성하는 방법:

• createLinearGradient(x0, y0, x1, y1): 선형 그라디언트
• createRadialGradient(x0, y0, r0, x1, y1, r1): 원형 그라디언트

그라디언트 객체를 만든 후 addColorStop() 메소드를 사용해 색상을 추가한다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// 선형 그라디언트 생성

var grd = ctx.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");
// 그라디언트로 채우기

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

6. 이미지 그리기

Canvas에 이미지를 그리려면 drawImage() 메소드를 사용한다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("myImage");

ctx.drawImage(img, 10, 10);

💡 참고:
• Canvas는 픽셀 기반 그래픽을 위한 것이며, SVG는 벡터 기반 그래픽을 위한 것이다.
• Canvas는 스크립트를 통해 조작하지만, SVG는 DOM 요소로 조작할 수 있다.
• 복잡한 애니메이션이나 사용자 상호작용이 많은 경우 Canvas가 더 효과적이다.

Canvas의 주요 특징

Canvas는 게임 개발, 데이터 시각화, 사진 조작, 실시간 비디오 처리 등 다양한 웹 애플리케이션에서 활용된다. 기본적인 도형 그리기부터 복잡한 그래픽 애니메이션까지 구현할 수 있는 강력한 도구이다.