21-05-15 HTML5 Canvas 기초 (4)

HTML5 Canvas 기초 (4)

캔버스내에서 Translate 사용하기

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.translate(250, 250);
  ctx.scale(scaleValue, scaleValue);
  scaleValue += 0.01;
  ctx.strokeRect(-50, -50, 100, 100);
  ctx.restore();

  requestAnimationFrame(draw);
}

draw();
...

ctx.setTransform(a, b, c, d, e, f)

a ~ f의 매개변수는 각각 수평 확장, 수직 왜곡, 수평으로 기울이기, 수직 확장, 수평 이동, 수직이동을 뜻한다

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

let scaleValue = 1;
let rotationValue = 0;

function toRadian(degree) {
  return (degree * Math.PI) / 180;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 초기화
  ctx.save();
  // 디폴트 값을 저장 (색상이나 폰트 스타일 등)
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.translate(250, 250); // 중앙으로 위치시킴
  ctx.scale(scaleValue, scaleValue);
  // scale함수는 도형의 크기를 변화시킴. 여기서는 매 draw 실행마다 0.01씩 가로세로가 커짐.
  ctx.rotate(toRadian(rotationValue));
  // rotateValue의 radian 값 만큼 회전, 마이너스가 된다면 시계 반대방향으로 회전할 것
  ctx.strokeRect(-50, -50, 100, 100);
  // 해당 도형 내 기준점(0, 0 이라면 좌측상단이 됨)에서 100, 100 크기의 사각형을 그림
  ctx.restore();
  // 저장된 디폴트값을 불러옴

  scaleValue += 0.01;
  rotationValue -= 2;
  requestAnimationFrame(draw);
}

draw();