HTML5 Canvas에서 rotate() 메서드로 현재 원점을 중심으로 회전하는 방법

HTML5 Canvas는 rotate(angle) 메서드를 제공하며, 이 메서드를 사용하면 캔버스를 현재 원점(current origin)을 기준으로 회전시킬 수 있습니다.

rotate() 메서드의 동작 원리

rotate() 메서드는 단 하나의 매개변수만 받습니다. 바로 캔버스를 회전시킬 각도(angle)입니다.

회전 방향은 시계 방향(clockwise)입니다.
각도의 단위는 도(degree)가 아닌 라디안(radian)입니다. 예를 들어 180도 회전은 Math.PI, 360도 회전은 Math.PI * 2로 표현합니다.

또한 translate(x, y) 메서드와 함께 사용하면 원하는 지점을 새로운 원점으로 설정한 뒤 그 지점을 중심으로 회전할 수 있습니다. 아래 예제에서는 ctx.translate(100, 100)으로 원점을 이동한 후 여러 색상의 원들을 회전시켜가며 나선형 패턴을 그립니다.

예제 코드

아래 코드를 실행하면 HTML Canvas가 회전하면서 도형이 그려지는 것을 확인할 수 있습니다.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width: 100px;
            height: 100px;
            margin: 0px auto;
         }
      </style>
      <script>
         function drawShape(){
            // DOM을 통해 canvas 요소 가져오기
            var canvas = document.getElementById('mycanvas');

            // canvas를 지원하지 않는 브라우저에서는 실행하지 않음
            if (canvas.getContext){
               // getContext로 2D 드로잉 컨텍스트 사용
               var ctx = canvas.getContext('2d');
               ctx.translate(100, 100);
               for (i = 1; i < 7; i++){
                  ctx.save();
                  ctx.fillStyle = 'rgb('+(51*i)+','+(200-51*i)+',0)';
                  for (j = 0; j < i*6; j++){
                     ctx.rotate(Math.PI*2/(i*6));
                     ctx.beginPath();
                     ctx.arc(0, i*12.5, 5, 0, Math.PI*2, true);
                     ctx.fill();
                  }
                  ctx.restore();
               }
            } else {
               alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>
</html>

코드 설명

위 예제의 핵심 로직은 다음과 같습니다.

getContext('2d')로 2D 드로잉 컨텍스트를 얻습니다.
translate(100, 100)으로 좌표계의 원점을 (100, 100) 위치로 이동시킵니다.
바깥쪽 반복문에서 각 단계마다 save()로 현재 상태를 저장하고, fillStyle로 RGB 색상을 변경합니다.
안쪽 반복문에서 rotate(Math.PI*2/(i*6))를 호출해 매번 일정 각도씩 시계 방향으로 회전한 뒤, arc()로 작은 원을 그리고 fill()로 채웁니다.
각 단계가 끝나면 restore()로 이전 상태를 복원하여 변환이 누적되지 않도록 합니다.

이처럼 rotate()와 translate(), save()/restore()를 조합하면 원점을 중심으로 한 다양한 회전 도형을 손쉽게 구현할 수 있습니다.