개요
HTML5 캔버스에서 이미지를 회전할 때 기본적으로는 좌측 상단(원점)을 기준으로 회전합니다. 하지만 실제 프로젝트에서는 이미지의 하단 중앙(bottom center)을 축으로 삼아 회전해야 하는 경우가 많습니다. 예를 들어 시계 바늘, 캐릭터의 다리, 게임 내 포탑 등이 대표적인 예입니다.
핵심 아이디어는 간단합니다. translate()로 회전 축이 될 지점을 원점으로 이동시킨 뒤, rotate()로 캔버스를 회전하고, 마지막에 이미지를 음수 좌표로 그려주면 됩니다.
1단계: 회전 축으로 좌표 이동 (translate)
먼저 컨텍스트를 이미지의 하단 중앙 지점으로 이동시킵니다. 예를 들어 이미지 크기가 가로 64px, 세로 120px라면 하단 중앙은 x축으로 절반인 32, y축으로 전체 높이인 120 위치가 됩니다.
context.translate(32, 120);
이 시점부터 캔버스의 원점(0, 0)은 이미지의 하단 중앙에 위치하게 됩니다.
2단계: 캔버스 회전 (rotate)
다음으로 캔버스를 원하는 각도만큼 회전합니다. 주의할 점은 rotate() 메서드가 라디안(radian) 단위를 사용한다는 것입니다. 따라서 도(degree) 단위의 값을 라디안으로 변환해야 합니다.
context.rotate(90 * Math.PI / 180);
위 코드는 90도를 라디안으로 변환하여 캔버스를 시계 방향으로 90도 회전시킵니다. 일반화하면 다음과 같습니다.
const angleInRadians = angleInDegrees * Math.PI / 180; context.rotate(angleInRadians);
3단계: 이미지 그리기 (drawImage)
마지막으로 이미지를 그립니다. 여기서 핵심은 좌표를 음수 값으로 지정하는 것입니다. 원점이 이미지의 하단 중앙으로 이동했으므로, 이미지를 원래 위치에 배치하려면 x좌표는 너비의 절반만큼(-32), y좌표는 전체 높이만큼(-120) 뒤로 이동한 위치에서 그려야 합니다.
context.drawImage(img, -32, -120, 64, 120);
전체 예제 코드
아래는 위 세 단계를 모두 적용한 완전한 예제입니다.
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
// 1. 하단 중앙 지점으로 원점 이동
context.translate(32, 120);
// 2. 90도 회전 (라디안 변환)
context.rotate(90 * Math.PI / 180);
// 3. 음수 좌표로 이미지 그리기
context.drawImage(img, -32, -120, 64, 120);
};
img.src = 'image.png';
</script>
추가 팁: save()와 restore() 활용
회전 변환은 이후 그리기 작업에도 영향을 미칩니다. 특정 이미지만 회전시키고 다른 요소에는 영향을 주고 싶지 않다면, 변환 전후로 save()와 restore()를 사용하는 것이 좋습니다.
context.save(); // 현재 상태 저장 context.translate(32, 120); context.rotate(90 * Math.PI / 180); context.drawImage(img, -32, -120, 64, 120); context.restore(); // 원래 상태 복원
정리
하단 중앙을 기준으로 이미지를 회전하는 절차는 다음 세 단계로 요약할 수 있습니다.
- translate(x, y): 회전 축이 될 하단 중앙 지점으로 원점을 이동
- rotate(rad): 도 단위 각도를 라디안으로 변환하여 회전
- drawImage(img, -w/2, -h, w, h): 음수 좌표로 이미지를 제자리에 배치
이 패턴을 응용하면 임의의 지점을 축으로 하는 회전도 손쉽게 구현할 수 있습니다.