[그래픽 처리] 변형 행렬의 저장과 복구/회전/save()/restore()/rotate()

[그래픽 처리] 변형 행렬의 저장과 복구


[1] save(), restore()

save()메서드와 restore()메서드의 형식은 다음과 같습니다.

context.save()

context.restore()

이 메서드들은 모두 스택(stack) 구조를 이용하고 있기 때문에 원하는 곳에서 원하는 횟수만큼 이용할 수 있습니다.
스택을 탑에 비유를 해보면, save() 메서드로 벽돌을 쌓고 restore() 메서드로 벽돌을 꺼내는 것에 해당합니다.

save(), restore() 메서드로 저장/복구되는 정보는 다음과 같습니다.

● 변형 행렬
● 렌더링 스타일
● 현재의 패스


[2] rotate()

rotate() 메서드는 도형을 회전시키는데, 아래의 형식을 가지고 있습니다.

context.rotate(angle)

인수로 지정하는 angle은 각도를 나타내는데, 단위를 '라디안'으로 나타낸다.
각도를 라디안으로 변환하는 계산식은 다음과 같다.

var rad=deg*Math*PI/180;

먼저 빨간 사각형을 먼저 렌더링한다.
행렬의 상태를 저장하고 이동 및 45도 회전을 지정하여 파란 사각형을 렌더링한다.
렌더링 후 행렬의 상태를 복구하여 90도 회전시킨 초록 사각형을 렌더링한다.