canvas 儲存與還原狀態

admin發表於2020-03-14
Canvas

繪圖中，有些狀態可能會在未來某一個時刻會用到。

此時就需要將當前的儲存起來，然後再需要的時候將其還原。

使用如下兩個方法可以實現儲存於還原狀態功能：

（1）.save()：儲存狀態。

（2）.restore()：還原已儲存的狀態。

下面通過程式碼例項對兩個方法的功能進行一下演示：

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

  ctx.fillStyle = "rgba(255,0,0,1)";
  ctx.save();

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

  ctx.fillStyle = '#0f0';
  ctx.fillRect(50, 50, 50, 50);

  ctx.restore();
  ctx.fillRect(90, 90, 50, 50);
} 
</script>
</head>
<body>
  <canvas id="canvas" width="200" height="150"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/14/135904xldeowg6zwzlf8ek.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下分析：

[JavaScript] 純文字檢視 複製程式碼
let cvs = document.getElementById("canvas");
let ctx = cvs.getContext("2d");

通過document.getElementById("ant")獲取<canvas>元素物件，也就是獲取畫布。

再利用<canvas>元素物件的getContext()方法獲取繪圖環境，具體參閱canvas getContext()一章節。

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

利用fillStyle屬性設定填充顏色為rgba(255,0,0,1)。

然後呼叫save()可以將上述設定的狀態儲存起來，當然能夠儲存填充顏色。

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

通過上述程式碼繪製一個矩形，填充色是上面定義的rgba(255,0,0,1)。

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

重新定義填充顏色為#0f0。然後繪製第二個矩形，也就是呈現綠色的矩形。

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

使用restore()方法可以還原之前儲存的狀態，自然填充色也會被重置為rgba(255,0,0,1)。

所以第三個矩形的顏色與第一個矩形的顏色相同。

相關閱讀：

（1）.save()可以參閱canvas save()一章節。

（2）.restore()可以參閱canvas restore()一章節。

相關文章