HTML - 캔버스의 save() 와 restore()

 Save()와 restore()는 캔버스의 설정 값을 저장하고 이전 설정 값을 불러올 수 있습니다. 이때 저장되는 값은 캔버스에 그려진 이미지나, 문자열 값이 아니라 현재 캔버스에 그리기 위해 속성에 적용된 값들입니다.

메서드	설 명
save()	캔버스의 전체 상태를 저장 (캔버스에 그려진 이미지가 아니라 캔버스가 가진 속성에 적용한 값을 저장)
restore()	가장 최근에 저장된 캔버스 상태를 복원 (캔버스에 그려진 이미지가 아니라 캔버스가 가진 속성에 적용한 값을 저장)

save() 는 여러 단계로 설정 값을 저장하며 여러 단계로 저장된 설정 값이 있을 경우 restore()로 현재 상태의 전 단계의 설정 값을 불러옵니다.

<style>
canvas {
  width: 300px;
  height:250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 첫 번째 설정 값 저장
context.fillStyle = 'red'; 
context.save();

// 두 번째 설정 값 저장
context.fillStyle = 'blue'; 
context.save();

// 세 번째 설정 값 저장
context.fillStyle = 'yellow';
context.save();

// 네 번째 설정 값
context.fillStyle = 'black';


// 검정색을 그림
// restore()로 세 번째 설정 값 불러오기
context.beginPath();
context.fillRect(0,10,30,30);
context.restore();

// 노랑색을 그림
// restore()로 두 번째 설정 값 불러오기
context.beginPath();
context.fillRect(50,10,30,30);
context.restore();

// 파랑색을 그림
// restore()로 첫 번째 설정 값 불러오기
context.beginPath();
context.fillRect(100,10,30,30);
context.restore();

// 빨간색을 그림
// restore()로 이전 설정 값 불러오기
// 이전 설정 값이 없으면 첫 번째 설정 값 불러오기
context.beginPath();
context.fillRect(150,10,30,30);
context.restore();

// 빨간색을 그림
// restore()로 이전 설정 값 불러오기
// 이전 설정 값이 없으면 첫 번째 설정 값 불러오기
context.beginPath();
context.fillRect(200,10,30,30);
context.restore();

// 빨간색을 그림
// 이전 설정 값이 없으면 첫 번째 설정 값 불러오기
context.beginPath();
context.fillRect(250,10,30,30);
</script>

위 예제에서 restore()로 더 이상 되돌릴 설정 값이 없으면 처음 상태 설정 값을 불러오게 됩니다.

<style>
canvas {
  width: 300px;
  height:250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 기본 설정 값은 검정색
// 첫 번째 설정 값 저장
context.fillRect(0, 0, 150, 150);
context.save();

// 두 번째 설정 값 저장
context.fillStyle = '#09F';
context.fillRect(15, 15, 120, 120);
context.save();

// 투명도 0.5로 설정
// 직사각형 그림
// 두 번째 설정 값 복원
context.fillStyle = '#FFF';
context.globalAlpha = 0.5;
context.fillRect(30, 30, 90, 90);
context.restore();

// 직사각형 그림
// 첫 번째 설정 값 복원
context.fillRect(45, 45, 60, 60);
context.restore();

// 직사각형 그림
context.fillRect(60, 60, 30, 30);
</script>