1.保存和恢復繪圖狀態：
在繪制圖形時，難免會重復使用某個樣式，甚至有時會在不同顏色之間來回切換。
那么為了減少代碼冗余，我們可以調用畫布中的save()方法，來幫我們
保存一些樣式和屬性，這樣我們就可以再通過調用restore() 方法，來再次使用這些我們曾保存好的樣式和屬性了！
下面看下具體代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>保存和恢復繪圖狀態</title> <script type="text/javascript"> window.onload = function () { //保存繪圖狀態 save var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.save(); //保存狀態 context.fillRect(50, 50, 100, 100); //初始定義，繪制紅色矩形 //恢復繪圖狀態 restore context.fillStyle = "rgb(0,255,0)"; context.fillRect(200, 50, 100, 100); //繪制綠色矩形 context.restore(); //恢復畫布狀態 context.fillRect(350, 50, 100, 100); //恢復到初始定義，繪制紅色矩形 } </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> 您的瀏覽器暫不支持畫布！ </canvas> </body> </html>
2.保存和恢復多個繪圖狀態：
多個繪圖狀態是如何保存的呢？
我們可以這么理解：有台復印機在大量的復印資料，最先復印的肯定是在最下層的，后來的一張張的累在上面，然后堆成一摞兒，
最上面的那份肯定是最后一次的復印操作，這個毋庸置疑！
保存狀態其實就類似復印機的工作狀態，最近保存的在最上層！
來看下代碼怎么實現：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>保存和恢復繪圖狀態</title> <script type="text/javascript"> window.onload = function () { //保存繪圖狀態 save var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.save(); context.fillRect(50, 200, 100, 100); //第一個保存狀態，繪制紅色矩形 context.fillStyle = "rgb(0,0,255)"; context.save(); context.fillRect(200, 200, 100, 100); //第二個保存狀態，繪制藍色矩形 context.restore(); context.fillRect(350, 200, 100, 100); //恢復藍色矩形的保存狀態，因為它是最后的保存狀態，所以它最先恢復。 context.restore(); context.fillRect(500, 200, 100, 100); //恢復紅色矩形的保存狀態。 } </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> 您的瀏覽器暫不支持畫布！ </canvas> </body> </html>
交流群：225443677