canvas restore()

admin發表於2019-08-27
CanvasREST

此方法可以還原一次最近儲存的狀態，當然還原方式具有規則。

為便於記憶與理解，從方法名稱入手，restore翻譯成漢語具有"復原"或者"還原"的意思。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
ctx.restore();

被還原的狀態儲存在一個狀態棧中，簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/27/112823u6tu66t1ym3tyaul.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是一個簡單的狀態棧示意圖，說明如下：

（1）.通過save()方法可以儲存狀態。

（2）.遵照先入後出的原則，每一次呼叫restore() 方法會還原一個狀態。

（3）.第一次呼叫會彈出狀態3，第二次呼叫彈出狀態2，以此類推。

關於save()方法的具體用法可以參閱canvas save()一章節。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script>
window.onload = () => {
  let cvs = document.getElementById("myCanvas");
  let ctx = cvs.getContext("2d");

  ctx.fillStyle = "rgba(255,0,0,1)";
  //儲存前面的狀態
  ctx.save();

  ctx.beginPath();
  ctx.rect(10,10, 110, 110);
  ctx.fill();

  //設定畫筆的顏色
  ctx.fillStyle = '#0f0';
  ctx.fillRect(100, 100, 111, 111);

  //還原前面儲存的狀態
  ctx.restore();
  ctx.fillRect(200, 200, 111, 111);
} </script>
</head>
<body>
<canvas id="myCanvas" width="350" height="300"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/27/112912xfkfkl0efrfg0uff.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

核心程式碼分析如下：

[JavaScript] 純文字檢視 複製程式碼
ctx.fillStyle = "rgba(255,0,0,1)";

上述程式碼規定紅色為填充顏色，且完全不透明。

[JavaScript] 純文字檢視 複製程式碼
ctx.save();

通過save()方法可以儲存前面的填充狀態。

[JavaScript] 純文字檢視 複製程式碼
ctx.rect(10,10, 110, 110);
ctx.fill();

上述程式碼繪製了一個矩形，採用前面定義的顏色進行填充。

於是此矩形呈現紅色，這個應該沒有什麼疑問。

[JavaScript] 純文字檢視 複製程式碼
ctx.fillStyle = '#0f0';
ctx.fillRect(100, 100, 111, 111);

上述程式碼規定新的填充顏色，然後通過fillRect()繪製一個填充矩形。

也就是我們看到的大致是綠顏色的矩形圖案，關於上述用到兩個繪製矩形兩個方法參閱如下文章：

（1）.canvas rect()方法一章節。

（2）.canvas fillRect() 方法一章節。

[JavaScript] 純文字檢視 複製程式碼
//還原前面儲存的狀態
ctx.restore();
ctx.fillRect(200, 200, 111, 111);

通過restore()方法可以彈出狀態棧中一個狀態。

當前狀態棧中只有一個狀態，也就是填充顏色，呼叫上述方法後，填充顏色得到圓環。

然後應用到fillRect()方法，對矩形進行填充，所以顏色也是紅色。

相關文章