新的一天又來啦，最近這些天一直是陰雨連綿的，也是醉了，不過還好今天終于可以看到燦爛的陽光了，現在這種溫度，最喜歡站在太陽下曬着太陽，身上暖暖的，心情也會好很好，o(￣︶￣)o
好啦，不扯這些閑篇了，進入正題吧，今天分享下
canvas.save()和canvas.restore()狀态的儲存和恢複使用方法及執行個體
canvas.save()用來儲存先前狀态的
canvas.restore()用來恢複之前儲存的狀态
注：兩種方法必須搭配使用，否則沒有效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
ctx.save();//狀态的儲存
ctx.setLineDash([]);
ctx.lineWidth=;
ctx.strokeStyle='red';
ctx.strokeRect(,,,);
ctx.restore();//狀态的恢複
ctx.arc(,,,,*Math.PI);
ctx.stroke();
</script>
</body>
</html>
代碼效果如下：
大家可以看到，在最上面的時候在canvas中畫了一個矩形，而且是虛線矩形，紅色，線寬為5，後來又畫了一個圓形
注意并沒有開辟新路徑，這個圓保持了canvas預設的狀态，黑色實線1px線寬，這是為什麼呢？
就是因為在定義了ctx以後，我們用了save()儲存了初始的狀态，在我們劃圓的時候用restore恢複了初始的狀态，是以為黑色實線。
再看下面這個例子上面的代碼簡單做了改變，但是效果卻不一樣了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="500"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
ctx.setLineDash([]);
ctx.lineWidth=;
ctx.save();//狀态的儲存，-----改變了儲存的位置
ctx.strokeStyle='red';
ctx.strokeRect(,,,);
ctx.restore();//狀态的恢複
ctx.arc(,,,,*Math.PI);
ctx.stroke();
</script>
</body>
</html>
代碼效果如下：
這次發生了什麼變化？
圓圈變成了虛線，并且線寬也是4了，但是顔色沒有變，為啥子嘞？就是因為使用canvas中save()方法時，先執行的虛線和線寬的代碼，也就是在儲存的時候已經把虛線和線寬儲存了，是以後來在執行恢複的時候就會恢複上
不過還有一個問題是，如果進行多次儲存并且多次恢複的時候，那他又是什麼樣子的呢？先看看代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
ctx.save();//第一次儲存
ctx.setLineDash([]);
ctx.lineWidth=;
ctx.strokeStyle='red';
ctx.strokeRect(,,,);
ctx.save();//第二次儲存
ctx.setLineDash([,,]);
ctx.lineWidth=;
ctx.strokeStyle='blue';
ctx.strokeRect(,,,);
ctx.save();//第三次儲存
ctx.restore();//恢複第一次
ctx.strokeRect(,,,);
ctx.restore();//恢複第二次
ctx.strokeRect(,,,);
ctx.restore();//恢複第一次
ctx.strokeRect(,,,);
</script>
</body>
</html>
代碼運作效果如下：
so？看到這個效果的時候是腫麼想的？這是神他喵的恢複功能？每個都不同，哈哈
接下來給大家說一個概念，就是記憶體中棧的概念–棧存儲的規律：先儲存的，後恢複，後儲存的，先恢複，ok，這個save和restore就是這樣的原理給大家畫一個圖，友善了解下
圖上面中3第一個存儲到到棧中，2是第二個存儲到裡面的，1是最後一個存儲上的，但是想要取出是就會先取出1，在取出2，在取出3，這也就解釋了棧的規律，先儲存的後恢複，後儲存的先恢複。
這個規律如果了解的話，那麼上面canvas中用save()多次存儲和多次恢複的順序就好了解了。
ok，現在就來說下那個是怎麼恢複的
第一個儲存的時候是canvas初始的狀态，沒有進行任何操作的
第二個儲存的時候為虛線，線寬為4，線的顔色為紅色
第三次儲存的時候虛線[10,5,15],線寬為8，線的顔色為藍色
第一次恢複的就是第三次儲存的，即虛線[10,5,15],線寬為8，線的顔色為藍色
第二次恢複的就是第二次儲存的，即虛線，線寬為4，線的顔色為紅色
第三次恢複的就是canvas初始的狀态，預設線寬1px，黑色；
好啦，今天就寫到這裡吧，休息休息…..一休哥，拜拜喽！