canvas.save()用來保存先前狀態的
canvas.restore()用來恢復之前保存的狀態
注：兩種方法必須搭配使用，否則沒有效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> canvas{ border: 1px 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([5]); ctx.lineWidth=4; ctx.strokeStyle='red'; ctx.strokeRect(50,50,300,300); ctx.restore();//狀態的恢復
ctx.arc(400,300,150,0,2*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: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="500"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
ctx.setLineDash([5]);
ctx.lineWidth=4;
ctx.save();//狀態的保存，-----改變了保存的位置
ctx.strokeStyle='red';
ctx.strokeRect(50,50,300,300);
ctx.restore();//狀態的恢復
ctx.arc(400,300,150,0,2*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: 1px 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([5]);
ctx.lineWidth=4;
ctx.strokeStyle='red';
ctx.strokeRect(50,50,100,100);
ctx.save();//第二次保存
ctx.setLineDash([10,5,15]);
ctx.lineWidth=8;
ctx.strokeStyle='blue';
ctx.strokeRect(100,100,100,100);
ctx.save();//第三次保存
ctx.restore();//恢復第一次
ctx.strokeRect(500,300,100,100);
ctx.restore();//恢復第二次
ctx.strokeRect(600,400,100,100);
ctx.restore();//恢復第一次
ctx.strokeRect(700,500,100,100);
</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，黑色；
好啦，今天就寫到這里吧，休息休息…..一休哥，拜拜嘍！