canvas 기존 스타일 저장 및 불러오기, save() restore()

canvas에 그리는 경우 context 영역에 설정된 기존의 스타일을 저장하고 다시 불러올 수 있는 save(), restore() 함수에 대하여 알아봅니다.

# 캔버스 적용중인 스타일 저장 또는 불러오기

하나의 context 영역에는 하나의 스타일만 가질 수 있습니다. 다양한 스타일의 도형 등을 그리기 위해서는 반복적인 스타일 지정이 필요한데 만약 이전에 그렸던 스타일을 저장, 기억한 후 다시 컨텍스트에 불러와 그릴 경우 save(), restore() 함수를 사용할 수 있습니다.

! 알아둘 것

이전에 사용했던 스타일을 다시 선택할 수 있는 이 방법은 기존의 방문했던 웹페이지를 다시 방문할 경우처럼 히스토리를 찾는 것과 비슷하게 동작합니다. 만약 한꺼번에 많은 스타일을 저장해서 불러와 사용하는 경우라면 변수에 저장하고 이를 불러오는 방법이 좋을 수 있습니다. 이 방법의 장점은 최근 사용했던 스타일을 다시 적용할 경우 빠르게 적용할 수 있다는 점입니다. 스타일 지정을 다시 할 필요가 없기 때문에 변수 지정 방법보다 더 편리할 수 있죠.

! save(), restore() 사용방법

사용하는 방법은 간단합니다. 현재 컨텍스트가 가진 스타일을 저장하기 위해서 save()를 입력하면 바로 저장됩니다. 다시 이 전에 사용된 스타일을 불러오기 위해서는 현재 캔버스의 컨텍스트에서 restore()를 입력하면됩니다.

! 여러개의 스타일 저장방법

참고로 save()를 누르면 기존에 저장되었던 스타일이 사라지지 않고 새로 저장된 스타일의 이전으로 기억됩니다. 그래서 여러개의 스타일을 적용하는 것이 가능하죠. 이 후에 restore()를 반복 사용함으로써 다시 불러올 수 있게됩니다.

# 캔버스 스타일 저장, 불러오기 예제보기

그럼 간단한 예제를 알아봅니다. save()를 사용하여 몇 가지 스타일을 저장하고 이를 restore()를 사용하여 불러와 다시 적용하는 예제입니다.

@ canvas.html

@ canvas.js

위 예제 코드를 실행하면 아래와 같이 나타나게됩니다.


! 설명보기