HTML 중급 문법

HTML HTML5 캔버스

HTML HTML5 캔버스 — 중급

HTML5 캔버스

1. 도입 (왜 배워야 하는가)

HTML5 캔버스는 웹 애플리케이션에서 그래픽을 그리기 위한 강력한 도구입니다. 실무에서는 데이터 시각화, 게임 개발, 애니메이션 등 다양한 분야에서 활용되며, 특히 사용자 경험(UX)을 개선하는 데 중요한 역할을 합니다. 만약 HTML5 캔버스를 모르고 있다면, 복잡한 그래픽이나 인터랙티브한 요소를 구현하는 데 한계가 생기고, 사용자에게 매력적이지 않은 웹 페이지를 제공하게 될 수 있습니다.

2. 핵심 개념 설명

HTML5 캔버스는 <canvas> 요소를 사용하여 2D 및 3D 그래픽을 그릴 수 있는 API를 제공합니다. 캔버스는 마치 빈 화폭과 같아서, 자바스크립트를 이용해 다양한 그림을 그릴 수 있습니다.

캔버스(Canvas): HTML5에서 제공하는 그래픽을 그릴 수 있는 영역입니다.
컨텍스트(Context): 캔버스에 그릴 수 있는 도구입니다. 2D 그래픽을 그릴 때는 2d를 사용합니다.

용어	설명
캔버스	그래픽을 그릴 수 있는 HTML 요소
컨텍스트	캔버스에 그림을 그릴 수 있는 도구
픽셀	화면의 가장 작은 단위

3. 기본 코드 예제

아래는 캔버스를 생성하고 간단한 사각형을 그리는 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 캔버스 예제</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
        // 캔버스 요소를 가져옵니다.
        var canvas = document.getElementById("myCanvas");
        // 2D 컨텍스트를 가져옵니다.
        var ctx = canvas.getContext("2d");
        // 사각형을 그립니다.
        ctx.fillStyle = "#FF0000"; // 빨간색으로 채우기
        ctx.fillRect(20, 20, 150, 50); // (x, y, width, height)
    </script>
</body>
</html>

실행 결과: 빨간색 사각형이 그려진 캔버스

1행: HTML 문서의 시작을 알립니다.
6행: 캔버스 요소를 생성하고 너비와 높이를 설정합니다.
10행: 자바스크립트 코드 영역을 시작합니다.
12행: 캔버스 요소를 변수에 저장합니다.
14행: 2D 컨텍스트를 가져옵니다.
16행: 사각형 색상을 빨간색으로 설정합니다.
17행: 사각형을 지정한 위치에 그립니다.

4. 실전 활용 예제

1. 데이터 시각화

상황: 쇼핑몰에서 상품 판매량을 막대 그래프로 나타내고 싶을 때

<canvas id="salesChart" width="400" height="200" style="border:1px solid #000;"></canvas>
<script>
    var ctx = document.getElementById("salesChart").getContext("2d");
    var salesData = [12, 19, 3, 5, 2, 3];
    var barWidth = 40;
    for (var i = 0; i < salesData.length; i++) {
        ctx.fillStyle = "#4CAF50"; // 초록색
        ctx.fillRect(i  (barWidth + 10), 200 - salesData[i]  10, barWidth, salesData[i] * 10);
    }
</script>

2. 간단한 게임

상황: 사용자에게 미니게임에서 공을 조작하게 할 때

<canvas id="gameCanvas" width="300" height="300" style="border:1px solid #000;"></canvas>
<script>
    var ctx = document.getElementById("gameCanvas").getContext("2d");
    var x = 150, y = 150, radius = 20;
    function drawBall() {
        ctx.clearRect(0, 0, 300, 300); // 이전 프레임 지우기
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }
    drawBall();
</script>

5. 흔한 실수와 주의사항

실수 1: 컨텍스트를 설정하지 않음

잘못된 코드:

var canvas = document.getElementById("myCanvas");
// var ctx = canvas.getContext("2d"); // 이 줄을 빼먹음
ctx.fillRect(20, 20, 150, 50); // 에러 발생

올바른 코드:

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

실수 2: 캔버스 크기와 스타일 크기가 다름