Hyper Text Markup Language 5

保存と復元

キャンバスの描画状態を保存するのがsaveメソッドで、復元するのがrestoreメソッドです。saveメソッドは描画状態をスタックに積み上げていき、restoreメソッドは最後に保存したものから順に復元していきます。

// 描画状態の保存
	save();

// 描画状態の復元
	restore();

サンプル

上段のサンプルでは、キャンバスの初期状態を保存し、いちいちfillStyleメソッドなどでリセットする手間を省いています。本来であれば黒い部分にもfillStyleが適用されますが、restoreメソッドで初期状態が復元されたことにより、fillStyleは初期値である黒色になっています。またスタックから取り出して空になっているので、再度初期状態を保存しています。

下段のサンプルでは透過度を減少させながら保存し、後からスタックより取り出して適用させています。

// サンプル（上段）
// 初期状態の保存
	cx.save();

// 塗りつぶしの色の指定と図形の描画
	cx.fillStyle = "rgba(255, 200, 200, 1)";
	cx.fillRect(10, 10, 100, 100);
	cx.fillText("Before", 20, 120);

// 保存した状態の復元と保存
	cx.restore();
	cx.save();

// 図形の描画
	cx.fillRect(130, 10, 100, 100);
	cx.fillText("After", 140, 120);

// 保存した状態の復元と保存
	cx.restore();


// サンプル（下段）
// 塗りつぶしの色の指定
	cx.fillStyle = "rgba(100, 100, 255, 1)";

// 透過度を減少させながら保存
	for(var i = 0; i<5; i++){
		cx.globalAlpha -= 0.2;
		cx.save();
	}

// 透過度を復元させ、適用
	for(var i = 0; i<5; i++){
		cx.restore();
		cx.fillRect(80 + (i * 15), 150 + (i * 15), 70, 70);
	}