[canvas] rotate() 메서드

canvas의 rotate() 메서드에 대해 MDN을 참고하여 공부해보았다.

CanvasRenderingContext2D.rotate(angle)

회전하고 싶은 각도를 입력하면 캔버스의 원점을 기준으로 캔버스의 x, y축이 입력한 angle 값으로 회전한다
파라미터로 전달할 회전하고 싶은 각도는 호도법으로 변환하여 라디안으로 입력해야 한다.
캔버스의 회전은 원점을 기준으로 이루어 지기 때문에 translate() 메서드로 원점을 변경한 후 rotate() 메서드를 실행하면 수정된 원점을 기준으로 캔버스의 x, y축이 회전된다.

context.rotate(회전각도 * Math.PI / 180); // 호도법으로 변환 필수!

예제

const canvas = document.querySelector("canvas"); // 캔버스 객체 가져오기
const ctx = canvas.getContext("2d"); // 캔버스의 2d 렌더링 context 가져오기

// 원본 캔버스에서 x좌표 100, y좌표 0의 점에서 가로 80, 세로 20 크기의 사각형을 그린다.
ctx.fillStyle = "gray";
ctx.fillRect(100, 0, 80, 20); 

// 캔버스축을 45도로 회전 (시계방향)
 ctx.rotate(45 * Math.PI / 180);
 
// 회전된 캔버스축을 기준으로 똑같은 사각형 그리기
ctx.fillStyle = "red";
ctx.fillRect(100, 0, 80, 20);

// 회전된 캔버스 축을 원본 캔버스로 돌려놓기 
 ctx.setTransform(1, 0, 0, 1, 0, 0); // 또는 ctx.resetTransform();

사진의 예제 코드와 같이 회색 사각형이 원점을 기준으로 45도 각도로 회전한 빨강 사각형의 모습을 볼 수 있다.

예제 - 도형의 중심에서 회전하기

어떤 도형의 중심에서 다른 도형을 그리고 싶으면 아래와 같은 절차로 진행하면 된다.

1. 기준이 되는 도형을 그린다.

2. 기준이 되는 도형의 중점을 구한다.

3. 캔버스의 원점을 도형의 중점으로 이동시킨다.

4. 캔버스의 축을 원하는 각도로 회전시킨다.

5. 캔버스의 원점을 음의 방향으로 이동시킨 크기 만큼 원상복귀 시킨다.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// 좌표및 수치
const x = 80;
const y = 60;
const width = 140;
const height = 30;

// 도형을 그린다.
ctx.fillStyle = "gray";
ctx.fillRect(x, y, width, height);

// 도형의 중점을 구한다
const centerX = x + width / 2; // 150 -> 도형의 중점이니 x의 위치에서 width의 절반값
const centerY = y + height / 2; // 75 -> 도형의 중점이니 y의 위치에서 height의 절반값

// 캔버스의 원점을 그린 도형의 중점으로 이동시킨다.
ctx.translate(centerX, centerY); // 캔버스의 원점은 (0,0) -> (150, 75)로 이동된다.

// 캔버스의 축을 도형의 중점에서 회전시킨다.
ctx.rotate(Math.PI / 2); // 90도 회전

// 캔버스의 원점을 이전 위치로 정확히 이동하기 위해 음의 방향으로 이동거리 만큼 다시 이동시켜 준다.
ctx.translate(-centerX , -centerY);

// 이동 및 회전된 캔버스에서 다시 도형을 그린다.
ctx.fillStyle = "red";
ctx.fillRect(x, y, width, height);

위의 과정을 단계별 그림으로 나타내면 아래와 같다.