23. save() - 현재 스타일저장

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.

.save()

.save()가 실행되기 전 canvas의 상태값을 저장(캡쳐)합니다. 복수의 캡쳐가 가능합니다.

.save()로 저장되는 상태값은 아래와 같습니다.

strokeStyle fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

save() 메소드를 호출할 때마다 순차적으로 저장이 되며 .restore() 메소드로 저장된 역순으로 복원이 가능합니다.

쉽게말하면 아래와 같습니다.

색상 : 검정

.save()

색상 : 빨강

.save()

색상 : 파랑

fillRect(사각형색상-파랑)

.restore()

fillRect(사각형색상-빨강)

.restore()

fillRect(사각형색상-검정)

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

function draw() {     var ctx = document.getElementById('canvas').getContext('2d');       ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings     ctx.save();                  // Save the default state           ctx.fillStyle = '#09F';      // Make changes to the settings     ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings     ctx.save();                  // Save the current state           ctx.fillStyle = '#FFF';      // Make changes to the settings     ctx.globalAlpha = 0.5;     ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings     ctx.save();                  // Save the current state           ctx.restore();               // Restore previous state     ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings           ctx.restore();               // Restore original state     ctx.fillRect(60,60,30,30);   // Draw a rectangle with restored settings           ctx.restore();               // Restore original state     ctx.fillRect(70,70,10,10);   // Draw a rectangle with restored settings       }

Demo