HTML 캔버스 API로 2D 그래픽 그리기

HTML5 캔버스 API를 활용한 2D 그래픽 구현

최근 웹 개발 분야에서 많은 관심을 받고 있는 HTML5의 캔버스 API는 2D 그래픽을 효과적으로 생성하고 조작할 수 있는 강력한 도구입니다. 이 글에서는 그러한 캔버스 기능을 활용하여 다양한 그래픽을 구현하는 방법에 대해 알아보도록 하겠습니다.

HTML5 캔버스란?

HTML5 캔버스는 웹 페이지에 도형과 이미지를 그릴 수 있는 비트맵 기반의 그래픽 컨테이너입니다. 실제 그래픽을 그리는 작업은 JavaScript를 통해 이루어지며, CSS는 이 과정에서 사용되지 않습니다. 즉, 캔버스는 그래픽을 위한 도화지의 역할을 하며, 위에 그려지는 모든 요소는 프로그래밍 언어인 자바스크립트로 생성됩니다.

캔버스 생성하기

캔버스를 웹 페이지에 추가하기 위해서는 먼저 HTML 문서 내에 <canvas> 태그를 작성해야 합니다. 이 태그는 캔버스의 크기를 정하는 width와 height 속성을 포함합니다. 예를 들면 다음과 같이 설정할 수 있습니다:

<canvas id="myCanvas" width="500" height="500">대체 텍스트</canvas>

위 코드는 500×500 픽셀의 크기를 가진 캔버스를 생성합니다.

캔버스 접근하기

브라우저에서 캔버스 객체를 가져오려면 JavaScript의 getElementById 또는 querySelector 메서드를 활용할 수 있습니다. 다음은 캔버스 객체를 가져오는 방법입니다:

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

렌더링 컨텍스트 이해하기

캔버스를 사용하여 도형을 그리기 위해서는 렌더링 컨텍스트를 확보해야 합니다. 2D 그래픽을 그릴 경우, getContext("2d") 메서드를 통해 2D 컨텍스트를 요청합니다. 다음 코드를 보시면:

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

여기서 ctx는 캔버스에 그릴 수 있도록 제공되는 다양한 메서드와 속성을 갖춘 객체입니다.

기본적인 도형 그리기

구성된 렌더링 컨텍스트를 활용하여 캔버스에 도형을 그릴 수 있습니다. 예를 들어, 직사각형을 아래와 같이 그릴 수 있습니다:

ctx.fillStyle = "blue"; // 색상 설정
ctx.fillRect(50, 50, 200, 100); // 직사각형 그리기

이 코드에서는 파란색으로 (50, 50) 위치에서 시작하여 너비 200픽셀, 높이 100픽셀의 직사각형을 그립니다.

좌표 시스템 이해하기

캔버스의 좌표 시스템은 좌측 상단이 (0, 0) 위치입니다. 모든 도형의 위치는 이 원점을 기준으로 계산되며, fillRect와 같은 메서드를 활용하여 위치를 지정하게 됩니다.

• fillRect(x, y, width, height): 특정 위치에 직사각형을 그립니다.
• strokeRect(x, y, width, height): 윤곽선이 있는 직사각형을 그립니다.

경로 그리기 및 다루기

도로를 또는 복잡한 도형을 그리기 위해서는 경로(path)를 사용할 수 있습니다. 경로 생성은 beginPath() 메서드로 시작하여, moveTo()와 lineTo() 메서드를 사용하여 점들을 연결하고, fill() 또는 stroke()로 도형을 마무리합니다:

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 300);
ctx.closePath(); // 경로 닫기
ctx.fill(); // 내부를 채우기

호 그리기

캔버스에서 원이나 호를 그리기 위해서는 arc() 메서드를 사용합니다. 이 메서드는 중심 좌표, 반지름, 시작 각도, 종료 각도 등을 매개변수로 받습니다:

ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2); // 원 그리기
ctx.fill();

고해상도 캔버스 출력하기

고해상도 이미지 출력을 위해 캔버스의 크기를 실제 출력될 이미지의 크기보다 2배 크게 설정하는 것이 권장됩니다. 예를 들어, 300×300 픽셀의 이미지를 출력하려면 캔버스는 600×600으로 설정해야 하며, 이 경우 CSS로 크기를 조정할 수 있습니다.

결론

HTML5의 캔버스 API는 다양한 2D 그래픽 생성과 조작을 가능하게 하는 유용한 도구입니다. 강력한 기능을 바탕으로, 개발자들은 동적인 웹 콘텐츠를 제작하고, 사용자와의 상호작용을 향상시킬 수 있습니다. 웹 프로그래밍에서 캔버스의 활용은 앞으로도 더욱 중요해질 것입니다.

이러한 방법들을 통해 실제로 여러분도 다양한 그래픽을 구현해 보실 수 있습니다. 실습을 통해 충분한 경험을 쌓고, 더 많은 창의적인 결과물을 만들어 보시기 바랍니다.

자주 물으시는 질문