8. context의 상태 저장 및 불러오기

8. context의 상태 저장 및 불러오기

context는 하나의 스택(stack)에 그림 상태들을 보유합니다. 그림 상태들은 변환(Transformation), clip() 메서드를 이용한 clipping region, strokeStyle, fillStyle 등과 같은 속성들로 구성됩니다. 그리고 이러한 그림상태들을 context는 다음과 같이 2 가지의 메서드를 사용하여 스택에 저장하거나 복원할 수 있습니다.

메서드	기능
save()	현재의 상태를 스택(stack)에 집어넣습니다.
restore()	Context 상태를 복원하기 위해서 스택으로부터 상태를 끄집어냅니다.

이제 “basic.html” 파일을 메모장으로 연 후 “// canvas에 그릴 선이나 도형 작성” 밑에 다음과 같이 코드를 작성합니다.

      //① 선 두께 5, 선색 빨강, 내부는 노랑색으로 채우는 직사각형 그리기
      context.strokeStyle = "red";
      context.fillStyle = "yellow";
      context.lineWidth = 5;
      context.fillRect(10,10,50,50);
      context.strokeRect(10,10,50,50);
      context.save(); //현재 상태를 저장

      //② 선 두께 10, 선색 보라, 내부는 파란색으로 채우는 직사각형 그리기
      context.strokeStyle = "violet";
      context.fillStyle = "blue";
      context.lineWidth = 10;
      context.fillRect(70, 10, 100, 100);
      context.strokeRect(70, 10, 100, 100);

      //③ 스택에 저장되어 있는  상태 복원
      context.restore();
      context.fillRect(180, 10, 100, 150);
      context.strokeRect(180,10,100,150);              

위와 같이 작성한 후 다른 이름으로 저장을 선택하여 “contextState.html”로 저장합니다. 이제 IE9를 통해서 확인해봅니다.

위의 결과에서 보는 것처럼 코드의 ①에서 그림상태를 선 두께 5, 선색 빨강, 내부는 노랑색으로 설정하여 하나의 직사각형을 그린 후 이를 save() 메서드를 이용하여 스택에 저장했습니다.
그 다음 ②에서 선 두께 10, 선색 보라, 내부는 파란색으로 채우는 직사각형 그리고 난 후 restore() 메서드를 이용하여 ①에서 사용한 그림상태 즉 선 두께 5, 선색 빨강, 내부는 노랑색으로 칠하는 그림 상태를 복원한 후 직사각형을 그려보니 ②의 그림상태가 아닌 ①의 그림상태로 그려지는 것을 알 수 있습니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.