HTML5 캔버스(Canvas)로 별 모양 그리기 완벽 가이드

HTML5 캔버스에 그림을 그리려면 JavaScript를 사용해야 합니다. 캔버스에 그리기 전에 먼저 HTML DOM 메서드인 getElementById()와 getContext()를 호출하여 캔버스 요소에 접근하고 2D 드로잉 컨텍스트를 준비해야 합니다.

HTML에서 별을 그리려면 <canvas> 요소를 사용하면 됩니다. 캔버스에서 별 모양을 만들 때는 lineTo() 메서드가 핵심 역할을 합니다. 이 메서드는 x와 y 좌표 값을 매개변수로 받아, 지정한 위치까지 선을 연결함으로써 별의 각 꼭짓점을 순서대로 그려냅니다.

캔버스 그리기 기본 흐름

HTML 문서에 캔버스를 배치하고 도형을 그리는 과정은 다음과 같습니다.

<canvas> 태그로 캔버스 영역을 생성하고 고유한 id를 부여합니다.
JavaScript에서 getElementById()로 해당 캔버스 요소를 가져옵니다.
getContext('2d')를 호출하여 2D 렌더링 컨텍스트 객체를 얻습니다.
beginPath()로 새 경로를 시작한 뒤, moveTo()와 lineTo()를 반복하여 별의 외곽선을 정의합니다.
closePath()로 경로를 닫고, fill()로 내부를 채워 완성합니다.

예제 코드

다음 코드를 실행하면 HTML5 캔버스를 이용해 파란색 별 하나를 화면에 그릴 수 있습니다.

<!DOCTYPE HTML>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="250"></canvas>
      <script>
         var canvas = document.getElementById('newCanvas');
         var ctx = canvas.getContext('2d');
         ctx.fillStyle = "blue";
         ctx.beginPath();
         ctx.moveTo(108, 0.0);
         ctx.lineTo(141, 70);
         ctx.lineTo(218, 78.3);
         ctx.lineTo(162, 131);
         ctx.lineTo(175, 205);
         ctx.lineTo(108, 170);
         ctx.lineTo(41.2, 205);
         ctx.lineTo(55, 131);
         ctx.lineTo(1, 78);
         ctx.lineTo(75, 68);
         ctx.lineTo(108, 0);
         ctx.closePath();
         ctx.fill();
      </script>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 300×250 크기의 캔버스 안에 파란색으로 채워진 오각별이 나타납니다. 각 lineTo() 호출이 별의 꼭짓점 하나씩을 잇고 있으며, 마지막에 시작점으로 돌아와 경로를 닫은 후 fill()로 색을 채우는 방식입니다.

응용하면 fillStyle 값을 바꿔 다양한 색상의 별을 그리거나, 좌표 계산식을 활용해 크기와 각도가 다른 별을 동적으로 생성할 수도 있습니다.