티스토리 뷰

GuriZzang.com에 오시면 

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


.restore()

.save()가 실행된 역순으로 스타일이 복구됩니다.


.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

댓글
댓글쓰기 폼
공지사항
Total
56,251
Today
11
Yesterday
49
링크
«   2021/01   »
          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 26 27 28 29 30
31            
글 보관함