JavaScriptのsave()メソッドはどのような用途に使われますか?-フロントエンドQ&A-php.cn

JavaScriptのsave()メソッドはどのような用途に使われますか?

青灯夜游

リリース： 2023-01-07 11:41:16

オリジナル

4150 人が閲覧しました

JavaScript では、save() メソッドは、現在のイメージ状態のコピーを保存するために使用されます。このメソッドは、現在の状態のコピーを、イメージ状態を保存するスタックにプッシュします。構文形式は "save( ）」。

JavaScriptのsave()メソッドはどのような用途に使われますか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.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()メソッドはどのような用途に使われますか?

カラースタイルと基点を設定したことがわかります。

復元したとき後でボックスを追加したとき

<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()メソッドはどのような用途に使われますか?