2.3 Canvas 변형

애니메이션에 앞서 기준점을 다른 위치로 옮기고, 회전하며, 확대·축소할 수 있는 변형 메서드에 대해 알아보겠습니다. 이러한 메서드를 사용하면 더욱 복잡한 그림과 다이나믹한 애니메이션을 만들 수 있습니다.

2.3.1 상태 저장과 복구하기

Canvas의 상태(state)를 관리하는 save()와 restore() 메서드에 대해 알아봅시다.

save()

• Canvas의 모든 상태를 저장합니다.

restore()

• 가장 최근에 저장된 Canvas의 상태를 복원합니다.

여기서 상태는 무엇을 의미할까요? 아래 목록의 항목 모두 Canvas 상태에 해당됩니다.

• 이전부터 적용된 변형 상태 : translate , rotate, scale
• 현재 적용된 스타일에 관련된 속성들 : strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompos
• 현재의 클리핑 경로(Cliping path) : 이것은 2.5.2 잘라내기와 패턴 만들기에서 배우게 됩니다.

Canvas에는 이러한 상태를 저장하는 스택이 있다는 것을 알아야합니다. 상태 스택에 대해 이해하기 위해 아래의 예제 2-3-1를 함께 살펴보겠습니다.

그림 2-3-1

context.fillRect(30, 30, 20, 20); //검은 사각형
context.save(); // 현재 context 상태(fillStyle - 검정)를 저장 (st1)

context.fillStyle = '#30A4A4'; //청록색 설정
context.fillRect(70, 70, 60, 60); 

context.save(); // 현재 context 상태(fillStyle - 청록)를 저장 (st2)

context.fillStyle = 'white'; //하얀색 설정
context.globalAlpha = 0.8; //투명도 0.8 지정 (st3)
context.beginPath();
context.arc(100, 100, 20, 0, Math.PI*2, false); 
context.fill();

//가장 최근에 저장했던 것(fillStyle,globalAlpha - 청록,1)을 회복 (st3 -> st2)
context.restore();  

context.beginPath();
context.arc(180, 180, 40, 0, Math.PI*2, false);
context.fill(); //큰 청록색 원

context.restore(); // 가장 최근에 저장된 상태로 되돌아감 (st2 -> st1) 

context.fillRect(250,250, 20, 20); // 검은 원

1. 첫번째 save()를 호출하여 현재의 fillStyle이 검정인 상태, st1을 상태 스택에 저장합니다.
2. 청록색으로 fillStyle을 변경하고 사각형을 그린 후, 두번째 save()를 호출하여 fillStyle이 청록색인 상태, st2를 저장합니다.