HTML5 Canvas로 동적 그래픽 만들기 🎨

HTML5 Canvas는 웹 페이지에 그래픽을 동적으로 그릴 수 있는 강력한 도구입니다. 이를 활용하면 복잡한 애니메이션부터 간단한 그림까지, 웹 개발자가 직접 제어할 수 있는 다양한 그래픽을 만들 수 있습니다. 오늘은 주니어 개발자 여러분이 쉽게 따라 할 수 있는 기본적인 Canvas 사용법을 알아보겠습니다.

기본 설정

먼저, HTML5 Canvas를 사용하기 위해서는 HTML 문서에 <canvas> 태그를 추가해야 합니다. 이 태그는 Canvas를 그릴 영역을 정의합니다.

<canvas id="myCanvas" width="480" height="320"></canvas>

이제 JavaScript를 사용하여 Canvas에 접근하고 그림을 그릴 수 있습니다.

Canvas에 그리기

Canvas에 그리기 위해선 먼저 Canvas의 컨텍스트(Context)를 가져와야 합니다. 컨텍스트는 Canvas에 그림을 그리는 방법을 정의합니다. 2D 그래픽을 그리려면 2D 컨텍스트를 사용합니다.

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

사각형 그리기

Canvas에 사각형을 그리는 것부터 시작해봅시다. fillRect(x, y, width, height) 함수를 사용하여 채워진 사각형을 그릴 수 있습니다. 여기서 x와 y는 사각형의 시작 위치이며, width와 height는 사각형의 너비와 높이입니다.

ctx.fillStyle = '#FF0000';
ctx.fillRect(20, 20, 150, 100);

이 코드는 캔버스의 (20, 20) 위치에 너비가 150이고 높이가 100인 빨간색 사각형을 그립니다.

원 그리기

원을 그리기 위해서는 arc(x, y, radius, startAngle, endAngle) 함수를 사용합니다. 여기서 x와 y는 원의 중심 위치, radius는 반지름, startAngle과 endAngle은 원을 그리기 시작하고 끝내는 각도입니다(라디안 단위).

ctx.beginPath();
ctx.arc(240, 160, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();

이 코드는 캔버스의 중앙에 파란색 원을 그립니다.

애니메이션 만들기

Canvas를 사용하여 간단한 애니메이션도 만들 수 있습니다. 예를 들어, 사각형을 오른쪽으로 움직이게 해봅시다.

var posX = 20;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#00FF00';
  ctx.fillRect(posX, 20, 150, 100);
  posX += 1;

  requestAnimationFrame(draw);
}

draw();

이 코드는 사각형을 캔버스의 왼쪽에서 오른쪽으로 움직이게 합니다. clearRect() 함수는 매 프레임마다 캔버스를 지워줍니다. requestAnimationFrame()은 다음 애니메이션 프레임을 준비합니다.

HTML5 Canvas는 이처럼 간단한 예제부터 복잡한 그래픽과 애니메이션까지, 웹에서 다양한 시각적 표현을 가능하게 해줍니다. 주니어 개발자 여러분도 이 기회에 Canvas를 활용해 보세요! 🚀