HTML <canvas> 태그로 2D 그래픽 그리기

HTML <canvas> 태그로 2D 그래픽 그리기

HTML5의 <canvas> 태그는 웹 페이지에서 동적으로 2D 그래픽을 그릴 수 있는 강력한 도구를 제공합니다. 이 태그는 주로 자바스크립트와 함께 사용되며, 이를 통해 다양한 그래픽 요소를 웹에 직접 그릴 수 있습니다. 이번 가이드에서는 <canvas> 태그의 기본 개념부터, 실제로 2D 그래픽을 그리는 방법을 단계별로 살펴보겠습니다.

 

 

목차

1. <canvas> 태그란 무엇인가?
2. <canvas> 태그의 기본 구조
3. 2D 그래픽을 그리는 기본 방법
4. 선, 사각형, 원 그리기
5. 텍스트 추가와 스타일링
6. 이미지 렌더링
7. 고급 예제: 간단한 애니메이션

 

<canvas> 태그란 무엇인가?

<canvas> 태그는 웹 페이지 내에서 픽셀 단위의 2D 그래픽을 그릴 수 있는 요소입니다. 이 태그는 단순한 직사각형의 그리기 영역을 제공하며, 자바스크립트를 사용해 이 영역에 그래픽을 동적으로 그릴 수 있습니다. <canvas>는 주로 게임, 데이터 시각화, 그리고 기타 인터랙티브한 그래픽 콘텐츠를 만드는 데 사용됩니다.

 

 

<canvas> 태그의 기본 구조

<canvas> 태그는 다른 HTML 요소와 유사하게, 너비와 높이를 설정할 수 있습니다. 이 태그는 자바스크립트의 getContext() 메서드를 사용하여 그리기 환경을 설정한 후 그래픽을 그릴 수 있습니다.

<canvas id="myCanvas" width="500" height="400">Your browser does not support the HTML5 canvas tag.</canvas>

위의 예제는 id가 "myCanvas"인 500x400 픽셀 크기의 캔버스를 정의합니다. 이 캔버스는 자바스크립트에서 호출될 준비가 된 상태입니다.

 

 

2D 그래픽을 그리는 기본 방법

그래픽을 그리기 위해서는 자바스크립트를 사용해 canvas 요소의 2D 렌더링 컨텍스트를 가져와야 합니다. 이 컨텍스트는 다양한 그리기 기능을 제공하며, 이를 사용해 도형, 텍스트, 이미지 등을 그릴 수 있습니다.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 여기서부터 ctx를 사용해 그래픽을 그립니다.
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

위 코드는 getContext('2d') 메서드를 사용해 2D 컨텍스트를 가져온 다음, fillRect() 메서드를 사용해 초록색 직사각형을 그리는 예제입니다.

 

 

선, 사각형, 원 그리기

캔버스에서 도형을 그리는 것은 상대적으로 간단합니다. 각 도형을 그리기 위한 메서드들이 ctx 객체에 정의되어 있습니다. 기본적으로 선, 사각형, 원을 그리는 방법은 다음과 같습니다:

• 선 그리기: moveTo()와 lineTo() 메서드를 사용해 선을 그릴 수 있습니다.
• 사각형 그리기: fillRect()와 strokeRect()를 사용해 채워진 사각형과 윤곽선만 있는 사각형을 그릴 수 있습니다.
• 원 그리기: arc() 메서드를 사용해 원 또는 호를 그릴 수 있습니다.

// 선 그리기
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

// 원 그리기
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

// 사각형 그리기
ctx.fillStyle = 'blue';
ctx.fillRect(120, 80, 100, 100);

위의 코드에서 선, 원, 사각형을 그리는 방법을 보여줍니다. beginPath()는 새로운 경로를 시작하며, stroke()는 경로를 캔버스에 그립니다.

 

 

 

 

텍스트 추가와 스타일링

캔버스에서 텍스트를 추가하려면 fillText() 또는 strokeText() 메서드를 사용합니다. 텍스트 스타일링을 위해 font, textAlign, fillStyle 등의 속성을 사용할 수 있습니다.

ctx.font = '30px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Hello Canvas', 50, 200);

이 예제에서는 "Hello Canvas"라는 텍스트를 빨간색으로 그립니다. font 속성으로 텍스트 크기와 폰트를 설정하고, fillStyle로 텍스트 색상을 지정합니다.

 

 

이미지 렌더링

캔버스에 이미지를 렌더링하기 위해 drawImage() 메서드를 사용합니다. 이 메서드는 이미지 객체, 비디오 요소, 또는 다른 캔버스를 소스로 사용하여 이미지를 그릴 수 있습니다.

const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
    ctx.drawImage(img, 10, 10, 200, 150);
}

위 코드에서 이미지를 로드한 후, 캔버스에 지정된 위치와 크기로 그립니다. drawImage() 메서드는 다양한 형태로 사용될 수 있어, 이미지의 크기나 위치를 조정할 수 있습니다.

 

 

고급 예제: 간단한 애니메이션

캔버스를 사용해 간단한 애니메이션을 구현할 수 있습니다. 이를 위해 requestAnimationFrame() 메서드를 사용해 프레임마다 캔버스를 업데이트합니다.

let x = 0;
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 초기화
    ctx.fillStyle = 'green';
    ctx.fillRect(x, 50, 50, 50);
    x += 2;
    requestAnimationFrame(draw);
}
draw();

이 코드는 움직이는 사각형을 구현한 예제로, clearRect() 메서드를 사용해 이전 프레임을 지우고 새로운 위치에 사각형을 그립니다. requestAnimationFrame()을 사용해 부드러운 애니메이션을 구현할 수 있습니다.

이로써 HTML <canvas> 태그를 사용해 2D 그래픽을 그리는 기본 방법을 살펴보았습니다. 다양한 도형, 텍스트, 이미지 및 애니메이션을 활용해 웹 페이지에 동적인 콘텐츠를 추가할 수 있습니다.