save 와 restore

save()

상태 저장

restore()

가장 최근에 저장된 상태 복원

중첩 가능!!

• 예를 들어, restore() 두 번 하면 마지막 - 1로 저장한 상태 복원

context.fillRect(100, 100, 200, 200);
context.fillStyle = 'orange'; // 물감찍기
context.fillRect(150, 150, 200, 200);

context.save();

context.fillStyle = 'blue';
context.beginPath();
context.arc(300, 300, 50, 0, Math.PI * 2, false);
context.fill();

context.restore();

// 왜 오렌지색이 될까?
context.beginPath();
context.arc(300, 300, 20, 0, Math.PI * 2, false);
context.fill();

---

setTransform() <-- 행렬등장

resetTransform() 과 같음
MDN Docs

• 디폴트로 transform 전에 쓰는 것

context.setTransform(1, 0, 0, 1, 0, 0);
// context.resetTransform();

• 나중에 복잡한 transform할 때 행렬 필요..중요...
• 변환(transform)을 초기화한다는 것의 의미 = 단위행렬로 만들어주는 것!!!!
  

---

scale

캔버스는 언제나 왼쪽위가 기준. CSS 같은 고수준의 API가 아님.

따라서

1. 기준으로 삼을 점까지 이동시킨 후
2. 회전하든 크기 뻥튀기하든 해야 함

즉

모든 기준점을 내가 잡아줘야 함

function draw() {
    context.strokeRect(300, 300, 100, 100);

    context.scale(1.01, 1.01);

    requestAnimationFrame(draw);
}

draw();

---

scale

function draw() {
    // context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.translate(350, 350);
    context.scale(scaleValue, scaleValue);
    scaleValue += 0.1;
    context.strokeRect(-50, -50, 100, 100);
    context.restore();

    requestAnimationFrame(draw);
}

---

애니메이션처럼 만들고 싶다면?

매 loop 마다 지워주면 된다!!

function draw() {
    context.clearRect(0, 0, canvas.width,  canvas.height); // 추가
    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.translate(350, 350);
    context.scale(scaleValue, scaleValue);
    scaleValue += 0.1;
    context.strokeRect(-50, -50, 100, 100);
    context.restore();

    requestAnimationFrame(draw);
}

---

save, restore의 역할을 확인해보자

function draw() {
    context.clearRect(0, 0, canvas.width,  canvas.height); 
    // context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.translate(350, 350);
    context.scale(scaleValue, scaleValue);
    scaleValue += 0.1;
    context.strokeRect(-50, -50, 100, 100);
    // context.restore();

    requestAnimationFrame(draw);
}

---

미니 사각형을 추가해보자

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

    context.fillRect(10, 10, 30, 30);

    requestAnimationFrame(draw);
}

save, restore을 주석처리해보자

즉..save, restore을 잘해줘야 안 헷갈림

---

rotate

let rotateValue = 0;

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

function draw() {
...
    context.rotate(toRadian(rotateValue));
    rotateValue += 1;
...
}

---

clearRect 를 안하면 가끔 멋진 효과

---

총정리

1. canvas 기준점은 무조건 0, 0이다 (CSS과 다르다ㅠㅠ)
   즉, 기준점을 잡아줘야 한다는 번거로움이 있다
   그래서 context.translate(350, 350) 기준점 옮겨줬다
   
   
2. 📌 버릇처럼!!! 꼭!! resetTransform() 로 초기화 시켜주고 transform 하기 (예상과 달리 움직일 일 없음)
   
   
3. Transform context.scale(scaleValue, scaleValue)
context.rotate(toRadian(rotateValue))
   
   
4. (transform 끝난 다음에) 그리기 context.strokeRect(-50, -50, 100, 100)
   
   
5. context.restore()

---

전체 코드

const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');
let scaleValue = 1;
let rotateValue = 0;

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

function draw() {
    // context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    // context.resetTransform();
    context.translate(350, 350);
    context.scale(scaleValue, scaleValue);
    context.rotate(toRadian(rotateValue));

    context.strokeRect(-50, -50, 100, 100);
    context.restore();

    scaleValue += 0.05;
    rotateValue += 1;

    context.fillRect(10, 10, 30, 30);

    requestAnimationFrame(draw);
}