[javascript] drawImage()로 이미지 회전하여 출력하기

개요

CanvasRenderingContext2D.drawImage() 함수에 대하여 알아 보겠습니다.

---

기본 사용법

CanvasRenderingContext2D.drawImage() 함수는 다음과 같이 3가지 형태로 이용할 수 있습니다.

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

 

각 파라미터가 의미하는 것은 다음 그림과 같습니다.

---

이미지 회전하여 출력하기

이미지를 회전하여 출력하기 위해서는 좌표계를 회전하는 rotate(), translate() 및 save(), restore() 함수도 알고 있어야 합니다.

CanvasRenderingContext2D.save() 함수는 현재의 canvas의 모든 상태 정보를 저장하고, restore() 함수는 저장된 이전 canvas 상태를 복구합니다.
translate() 는 원점을 이동시켜주는 함수이고, rotate() 함수가 좌표계를 회전시킵니다.

rotate() 함수가 회전시키는 기준은 다음과 같습니다. 오른쪽 X 축을 기준으로 시계방향으로 회전을 하게 됩니다.

이 함수들을 조합하여, 이미지를 회전시켜 출력하는 소스를 간단하게 만들면 다음과 같습니다.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.width = 500;
ctx.height = 500;
const image = document.getElementById("source");

image.addEventListener("load", (e) => {
  let index = 0;
  for ( ; index <= 12 ; index ++) {
    ctx.save();
    ctx.translate(300, 300);
    ctx.rotate(Math.PI * 2 / 12 * index);
    ctx.drawImage(image, 0, 0);
    ctx.restore();
  }
});

위 예제 소스를 실행하면 다음과 같이 이미지가 그려집니다.

---

참고자료

• "CanvasRenderingContext2D: drawImage() method":https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
• "CanvasRenderingContext2D: rotate() method":https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
• "CanvasRenderingContext2D: save() method":https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
• "CanvasRenderingContext2D: restore() method":https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore