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



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


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


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


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



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

@ canvas.html
<canvas id="test"></canvas>

@ canvas.js
var ctx = document.querySelector('#test').getContext('2d');

ctx.fillStyle = '#f00'; 
ctx.save();

ctx.fillStyle = '#0f0'; 
ctx.save();

ctx.fillStyle = '#00f';

ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(150, 50, 30, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(200, 50, 30, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();

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


! 설명보기