Canvas繪圖狀態的儲存和恢復（十）
阿新 • • 發佈：2018-12-12
首先，什麼是狀態，畫布上的路徑和點陣圖並不屬於狀態，應該把狀態看做2D渲染上下文屬性的描述；是不是很難理解！！！
那就別理解了，看以下的例子你能基本理解這個意思！！！
1、儲存繪圖狀態函式
context.save();
儲存當前畫布狀態程式碼使用：
context.fillStyle = "#123123";
context.save();//保持畫布狀態
context.fillRect(100,100,100,100);這個程式碼其實就是儲存了上面的顏色狀態，並把它放入棧中，這裡的棧就是後入先出，有嚴格的順序，那怎麼恢復這個狀態呢？
2、恢復繪圖狀態函式
context.restore();
從棧中恢復點前最上面的畫布狀態程式碼使用：
context.restore();
context.fillRect(100,100,100,100);那這個功能有上面用呢？？
先給你來個小的作用（後面的章節有更大作用），就是畫5個矩形，要求第1個矩形顏色和第4個顏色相同；第2個矩形和第3個相同；
第一的反應如果是在每次畫矩形前使用context.fillStyle函式的話，恭喜你，以往的文章你學習的不錯，但是下面就是用儲存和繪圖的方法來實現更輕鬆！
程式碼：
<!DOCTYPE html> <!-- 告訴瀏覽器我們使用的HTML模板為HTML5 --> <html lang="en"> <!-- 網頁頁面的根，其他元素均放在其中，只能有一個 --> <head> <!--頁面所有meta元素均包含在這裡 --> <meta charset="UTF-8"> <!-- 編碼方式 --> <title>Canvas高速入門</title> <!-- 頁面設定名稱，顯示在瀏覽器標題欄中 --> <!-- CSS 及 javascript 程式碼放置處 --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery庫--> <script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); context.fillStyle = "#bb3123"; context.save();//保持畫布狀態1 context.fillRect(0,100,50,50); //第1個 context.fillStyle = "#45ab11"; context.save();//保持畫布狀態2 context.fillRect(100,100,50,50); //第2個 context.restore();//恢復畫布狀態2 棧最上面 context.fillRect(200,100,50,50); //第3個 context.restore();//恢復畫布狀態1 棧出來 context.fillRect(300,100,50,50); //第4個 context.fillRect(400,100,50,50); //第5個 }); </script> </head> <body> <!-- 頁面的主題內容均在這裡 --> <canvas width="500" height="500" id="mycanvas" style="background-color: #113344"></canvas> </body> </html>
效果圖：
發現很輕鬆就實現了！！！注意儲存2次，恢復2次，此時棧中已經沒有任何狀態，第5個矩形這個時候就是使用最後一次出棧的屬性，就是第1個矩形的屬性！！！
那如果只恢復一次呢？？第4個和第5個繪圖的屬性就會使用最後一次出棧的屬性，就是第2個矩形的屬性！
程式碼：
<!DOCTYPE html> <!-- 告訴瀏覽器我們使用的HTML模板為HTML5 --> <html lang="en"> <!-- 網頁頁面的根，其他元素均放在其中，只能有一個 --> <head> <!--頁面所有meta元素均包含在這裡 --> <meta charset="UTF-8"> <!-- 編碼方式 --> <title>Canvas高速入門</title> <!-- 頁面設定名稱，顯示在瀏覽器標題欄中 --> <!-- CSS 及 javascript 程式碼放置處 --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery庫--> <script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); context.fillStyle = "#bb3123"; context.save();//保持畫布狀態1 context.fillRect(0,100,50,50); //第1個 context.fillStyle = "#45ab11"; context.save();//保持畫布狀態2 context.fillRect(100,100,50,50); //第2個 context.restore();//保持畫布狀態2 棧最上面 context.fillRect(200,100,50,50); //第3個 //context.restore();//保持畫布狀態1 棧出來 context.fillRect(300,100,50,50); //第4個 context.fillRect(400,100,50,50); //第5個 }); </script> </head> <body> <!-- 頁面的主題內容均在這裡 --> <canvas width="500" height="500" id="mycanvas" style="background-color: #113344"></canvas> </body> </html>
恢復一次效果圖：
