Canvas 的save()與 restore()的詳細介紹

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

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

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

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

三、當前的裁剪路徑(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()，多餘的並無效果。