save()和restore()是用來儲存和恢復canvas狀態的，都沒有引數。 Canvas的狀態就是當前畫面應用的所有樣式和變形的一個快照。

Canvas狀態儲存在棧中，每當save()方法被呼叫後，當前的狀態就被推送到棧中儲存。一個繪畫狀態包括：

1、當前應用的變形（即移動，旋轉，和縮放）

2、strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,shadowOffsetX,shadowOffsetY
shadowBlur,shadowColor,globalCompositeOperation的值

3、當前的裁剪路徑(clipping path)

你可以呼叫任意多次save方法

每一次呼叫restore方法，上一次儲存的狀態就從棧中彈出，所有設定都恢復。

例一

 function draw(){
   var ctx = document.getElementById("canvas").getContext("2d");
   ctx.fillRect(0,0,150,150);
   ctx.save();  //預設設定
   ctx.fillStyle = "#09f";
   ctx.fillRect(15,15,120,120); //填充當前設定的#09f顏色
   ctx.restore();
   ctx.fillRect(30,30,90,90); //填充預設的黑色
 }
 

例二

<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = "pink";
ctx.lineWidth = 3;
ctx.save();//預設設定
function drawLine(){
  ctx.beginPath();
  ctx.moveTo(50,50);
  ctx.lineTo(100,100);
  ctx.stroke();
}
 function draw(){
   ctx.strokeStyle = "green";
   ctx.save();
   ctx.restore();
   ctx.restore();
   drawLine();
 }
 draw()  //線為pink  
 draw()  //線為green  
</script>
 

第一次執行draw() 畫出的線為pink的原因：因為第一次執行js程式碼執行2次ctx.save()，對應著2次ctx.restore();返回到顏色為pink的狀態

第二次執行只執行一次ctx.save()，執行2次的ctx.restore()效果跟一次是一樣的，所以為綠色

注意：一般ctx.save()與ctx.restore()是成對出現的，當ctx.restore()的個數多餘ctx.save()，多餘的並沒有效果。