首頁 > 文章 > web前端 > javascript save()方法有什麼用

javascript save()方法有什麼用

青灯夜游原創: 2021-06-28 17:55:214066瀏覽

在javascript中，save()方法用來保存目前影像狀態的一份拷貝，該方法把目前狀態的一份拷貝壓入到一個保存影像狀態的堆疊中；語法格式「save( )」。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

save() 方法是HTML DOM CanvasRenderingContext2D 物件的一個方法。

save() 方法儲存目前影像狀態的一份拷貝。

語法

save()

描述

save() 方法把目前狀態的一份拷貝壓入到一個儲存影像狀態的堆疊中。這就允許您臨時地改變映像狀態，然後，透過呼叫 restore() 來還原先前的值。
一個畫布的圖形狀態包含了 CanvasRenderingContext2D 物件的所有屬性（除了唯讀的畫布屬性以外）。它還包含了一個變換矩陣，該矩陣是呼叫 rotate()、scale() 和 translate() 的結果。另外，它包含了剪切路徑，該路徑透過 clip() 方法指定。可是要注意，目前路徑和目前位置並非圖形狀態的一部分，並且不會由這個方法保存。

說明：

save()和restore()方法要一起使用才會有效果。
save()方法就是要儲存你在save()中設定的各種樣式以及屬性。

舉例

#首先我在save的方法中建立了一個盒子

<body>
	<canvas id="" width="600" height="400"></canvas>;
</body>
<script type="text/javascript">
	var pen = document.querySelector(&#39;canvas&#39;).getContext(&#39;2d&#39;);
	// 调用save方法
	pen.save();
	// 改变基点的位置
	pen.translate(300,300);
	// 设置填充颜色
	pen.fillStyle = &#39;red&#39;;
	pen.fillRect(0,0,100,100);
	pen.restore();
</script>

javascript save()方法有什麼用

可以看到我將顏色的樣式以及基點都設定進去了

當我再在restore後面加入一個盒子的時候

<body>
	<canvas id="" width="600" height="400"></canvas>;
</body>
<script type="text/javascript">
	var pen = document.querySelector(&#39;canvas&#39;).getContext(&#39;2d&#39;);
	// 调用save方法
	pen.save();
	pen.translate(300,300);
	// 设置填充颜色
	pen.fillStyle = &#39;red&#39;;
	pen.fillRect(0,0,100,100);
	pen.restore();
	// 这里我在创建一个盒子
	pen.beginPath();
	pen.fillStyle = &#39;black&#39;;
	pen.fillRect(0,0,100,100);
	pen.fill();
</script>

javascript save()方法有什麼用

這裡就發現了我在save方法外面設定的屬性對save中的沒有任何影響，並且save中的基點的設定也對save方法外設定的盒子沒有任何影響。

總結：save方法相當於將我設定的內容隔離出來，不會對外面的任何內容造成影響。

【相關推薦：javascript學習教學】

以上是javascript save()方法有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript和jsp有什麼差別下一篇：javascript和jsp有什麼差別

看更多