canvas save()和restore()

admin發表於2018-08-10
CanvasREST

save方法儲存當前狀態，而restore方法還原之前儲存的狀態。

兩方法在繪圖中有著重要作用，例如繪圖的時候多顏色切換，save和restore方法比較方便實現此功能。

程式碼例項如下:

[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=function(){
  var cvs = document.getElementById("myCanvas");
  var ctx = cvs.getContext("2d");
  ctx.fillStyle = "rgba(255,0,0,1)";
  //前面的狀態
  ctx.save();
  ctx.beginPath();
  ctx.rect(100,100, 110, 110);
  ctx.fill();
  //設定畫筆的顏色
  ctx.fillStyle = '#0f0';
  ctx.fillRect(250, 250, 111, 111);
  //還原前面儲存的狀態
  ctx.restore();
  ctx.fillRect(300, 500, 111, 111);
} </script>
</head>
<body>
<canvas id="myCanvas" width="700" height="600"></canvas>
</body>
</html>

上面程式碼僅僅演示這兩個方法的作用，填充，描邊，漸變，畫面位移等都是可以儲存和還原的。

特別說明:

（1）.每呼叫一次restore方法就會還原前面的一個狀態。

（2）.可能會儲存多個狀態，比如狀態一和狀態二，那麼還原順序是狀態二和狀態一，先儲存的後還原。

在canvas繪製扇形程式碼例項一章節應用到了這兩個方法，可以自行進行分支。

相關文章