HTML5 canvas 태그: 모든 것을 담을 수 있는 도화지

HTML5에서 제공하는 <canvas> 태그는 그래픽 콘텐츠를 동적으로 생성하고 조작할 수 있는 강력한 기능을 제공합니다. 이 태그는 도형, 애니메이션, 데이터 시각화, 게임 개발 등 다양한 작업에 활용됩니다. 이 글에서는 <canvas> 태그의 기본 개념부터 실제 활용법까지 5,000자 이상으로 자세히 설명합니다.

---

1. <canvas> 태그란?

<canvas> 태그는 픽셀 기반의 그래픽을 렌더링하기 위한 도화지 역할을 합니다. 기본적으로 HTML 문서에서 비어 있는 사각형 영역으로 표시되며, JavaScript를 사용해 다양한 그래픽을 그릴 수 있습니다.

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>

속성

• width: 캔버스의 너비를 지정합니다. 기본값은 300 픽셀입니다.
• height: 캔버스의 높이를 지정합니다. 기본값은 150 픽셀입니다.

---

2. <canvas> 태그 사용의 기본 원리

2.1 JavaScript를 통한 조작

<canvas> 자체로는 아무런 콘텐츠를 표시하지 않습니다. 캔버스에 그래픽을 그리기 위해서는 JavaScript와 함께 사용해야 합니다.

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d'); // 2D 렌더링 컨텍스트 가져오기
</script>

• 컨텍스트(Context): 캔버스에서 그리기 작업을 수행하는 인터페이스로, 일반적으로 2D 또는 WebGL(3D) 컨텍스트를 사용합니다.

---

3. 캔버스에서 그릴 수 있는 요소

3.1 직사각형

직사각형은 캔버스에서 가장 기본적인 도형입니다.

ctx.fillStyle = 'blue'; // 채우기 색상
ctx.fillRect(50, 50, 150, 100); // x, y, 너비, 높이

• fillRect(x, y, width, height): 직사각형을 채웁니다.
• strokeRect(x, y, width, height): 직사각형의 윤곽선을 그립니다.
• clearRect(x, y, width, height): 지정된 영역을 지웁니다.

---

3.2 선 그리기

ctx.beginPath(); // 새로운 경로 시작
ctx.moveTo(50, 50); // 시작점 이동
ctx.lineTo(200, 50); // 끝점 지정
ctx.stroke(); // 선 그리기

• beginPath(): 새로운 경로를 시작합니다.
• moveTo(x, y): 경로의 시작점을 설정합니다.
• lineTo(x, y): 현재 경로에서 특정 지점까지 선을 그립니다.
• stroke(): 경로를 따라 윤곽선을 그립니다.

---

3.3 원 그리기

ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2); // x, y, 반지름, 시작 각도, 끝 각도
ctx.fillStyle = 'red';
ctx.fill();

• arc(x, y, radius, startAngle, endAngle): 원 또는 호를 그립니다.
• fill(): 도형 내부를 채웁니다.

---

3.4 텍스트 그리기

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 100, 100);

• font: 텍스트의 폰트를 설정합니다.
• fillText(text, x, y): 텍스트를 지정한 위치에 채웁니다.
• strokeText(text, x, y): 텍스트의 윤곽선을 그립니다.

---

4. 고급 그래픽 작업

4.1 그래디언트

캔버스는 선형 및 방사형 그래디언트를 지원합니다.

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

• createLinearGradient(x0, y0, x1, y1): 선형 그래디언트를 생성합니다.
• addColorStop(offset, color): 그래디언트의 색상을 추가합니다.

---

4.2 이미지 그리기

const img = new Image();
img.src = 'example.jpg';
img.onload = () => {
  ctx.drawImage(img, 50, 50, 200, 150);
};

• drawImage(image, x, y, width, height): 캔버스에 이미지를 그립니다.

---

4.3 변환 작업

캔버스는 그래픽을 회전, 이동, 크기 조정할 수 있습니다.

ctx.translate(100, 100); // 좌표 이동
ctx.rotate((Math.PI / 180) * 45); // 45도 회전
ctx.fillRect(0, 0, 50, 50); // 이동 및 회전된 상태에서 사각형 그리기

• translate(x, y): 캔버스의 원점을 이동합니다.
• rotate(angle): 캔버스를 회전합니다.
• scale(x, y): 캔버스를 크기 조정합니다.

---

5. 애니메이션 구현

캔버스는 애니메이션 작업에 자주 사용됩니다. JavaScript의 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; // x 좌표 증가
  if (x > canvas.width) x = 0; // 화면을 벗어나면 초기화
  requestAnimationFrame(draw); // 다음 프레임 요청
}

draw();

---

6. 인터랙티브 요소

사용자의 입력(마우스, 키보드)을 처리하여 상호작용하는 그래픽을 만들 수 있습니다.

6.1 마우스 이벤트

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'blue';
  ctx.fillRect(x - 25, y - 25, 50, 50); // 마우스를 따라가는 사각형
});

---

7. 활용 사례

7.1 데이터 시각화

<canvas>는 그래프, 차트 등의 데이터 시각화 도구로 활용됩니다. 예를 들어, Chart.js 같은 라이브러리를 사용하면 다양한 차트를 쉽게 만들 수 있습니다.

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: 'Votes',
      data: [12, 19, 3],
      backgroundColor: ['red', 'blue', 'yellow'],
    }],
  },
});

7.2 게임 개발

2D 게임 엔진 없이도 간단한 게임을 만들 수 있습니다. 예를 들어, 캔버스를 이용해 클래식 아케이드 게임을 제작할 수 있습니다.

---

8. 결론

HTML5의 <canvas> 태그는 웹 애플리케이션 개발에 있어서 그래픽 작업의 핵심 도구입니다. 이 글에서 소개한 다양한 방법과 예제를 기반으로 창의적인 그래픽 콘텐츠를 제작해보세요!