canvas中save()和restore()方法的使用
阿新 • • 發佈：2019-01-29
save()和restore()方法是繪製複雜圖形必不可少的方法.它們分別是用來儲存和恢復 canvas 狀態的，都沒有引數。
Canvas 狀態是以堆(stack)的方式儲存的，每一次呼叫
你可以呼叫任意多次
舉個save 和 restore 的應用例子吧。
我們嘗試用這個連續矩形的例子來描述 canvas 的狀態堆是如何工作的。
第一步是用預設設定畫一個大四方形，然後儲存一下狀態。改變填充顏色畫第二個小一點的白色四方形，然後再儲存一下狀態。再次改變填充顏色繪製更小一點的藍色四方形。然後我們呼叫了restore方法將設定回到前一個save狀態下的fillStyle＝"white"，即在不設定顏色值的情況下再繪製最小的矩形時其添充色為白色。
一旦我們呼叫
程式碼：
<script type="text/javascript">
window.onload=function(){
var ctx=document.getElementByIdx_x_x("canvas").getContext("2d");
ctx.fillRect(10,10,150,150);
ctx.save();
ctx.fillStyle="white";
ctx.fillRect(30,30,110,110);
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(50,50,70,70);
ctx.restore();//回到上一個狀態,即 ctx.fillStyle="white";
ctx.save();
ctx.fillRect(70,70,30,30);//所以此處沒有設定fillStyle的時候顏色為white，注意哦！如果在白色矩形後面也restore一下剛此處的fillStyle就為黑色了
ctx.restore();
}
</script>
Canvas 狀態是以堆(stack)的方式儲存的，每一次呼叫
save 方法，當前的狀態就會被推入堆中儲存起來。這種狀態包括：當前應用的變形（即移動，旋轉和縮放，見下）:
strokeStylefillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX,shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值你可以呼叫任意多次
save 方法。每一次呼叫 restore 方法，上一個儲存的狀態就從堆中彈出，所有設定都恢復。舉個save 和 restore 的應用例子吧。
我們嘗試用這個連續矩形的例子來描述 canvas 的狀態堆是如何工作的。
第一步是用預設設定畫一個大四方形，然後儲存一下狀態。改變填充顏色畫第二個小一點的白色四方形，然後再儲存一下狀態。再次改變填充顏色繪製更小一點的藍色四方形。然後我們呼叫了restore方法將設定回到前一個save狀態下的fillStyle＝"white"，即在不設定顏色值的情況下再繪製最小的矩形時其添充色為白色。
一旦我們呼叫
restore，狀態堆中最後的狀態會彈出，並恢復所有設定。如果不是之前用 save 儲存了狀態，那麼我們就需要手動改變設定來回到前一個狀態，這個對於兩三個屬性的時候還是適用的，一旦多了，我們的程式碼將會猛漲。
簡而言之restore方法就可以理解成將其對應的當前save狀態下的設定全部恢復為前一個狀態程式碼：
<script type="text/javascript">
window.onload=function(){
var ctx=document.getElementByIdx_x_x("canvas").getContext("2d");
ctx.fillRect(10,10,150,150);
ctx.save();
ctx.fillStyle="white";
ctx.fillRect(30,30,110,110);
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(50,50,70,70);
ctx.restore();//回到上一個狀態,即 ctx.fillStyle="white";
ctx.save();
ctx.fillRect(70,70,30,30);//所以此處沒有設定fillStyle的時候顏色為white，注意哦！如果在白色矩形後面也restore一下剛此處的fillStyle就為黑色了
ctx.restore();
}
</script>