HTML5 Canvas 状態

キャンバス上に图形を描画する際には、よくsave()とrestore()を通じて2Dコンテキストの状態。例えば、直線や矩形を描画する際にはstrokStyleが必要で、次の直線や矩形を描画する際には別のstrokStyleが必要です。または異なる塗りつぶし色、回転角度など。

それを使用する際には、2HTML5キャンバス上に描画する際には、2Dコンテキストが特定の状態にいます。それは操作を通じて2Dコンテキスト属性（例えばfillStyleと）を設定してその状態strokeStyleを設定します。これらの操作を総じて2Dコンテキストstate。
通常、キャンバス上に描画する際には、描画中に変更する必要があります。2Dコンテキストの状態。例えば、strokStyleは直線や矩形に対して必要で、他の直線や矩形に対しては別のものが必要になる可能性があります。または他の変更、または他のもの。
各形状を描画する前に完全な状態を設定することは煩雑なので、状態を状態スタックにプッシュすることができます。その後、以前の状態を再びポップすることができます。これは、一時的な状態変更後の以前の状態への迅速な復元方法です。

HTML5 Canvasキャンバス状態の例

描画状態をスタックにプッシュおよびポップする方法は以下の通りです:

context.save();　　　　　//　状態を状態スタックにプッシュします.
context.restore();　　//　最前面の状態をスタックからポップし、2dのコンテキスト中.

保存した状態をスタックに複数の状態をプッシュし、それをポップすることができます。以下はそのコードの例です:

<canvas　id="ex1"　width="500"　height="100"　style="border:　1px　solid　#cccccc;">HTML5　Canvas　not　supported</canvas>
<script>
var　canvas　　=　document.getElementById("ex1");
var　context　=　canvas.getContext("2d");
context.fillStyle　　="#66ff66";
context.strokeStyle="#990000";
context.lineWidth　　=　5;
context.fillRect　　(5,　5,　50,　50);
context.strokeRect(5,　5,　50,　50);
context.save();
context.fillStyle　=　"#6666ff";
context.fillRect　　(65,　5,　50,　50);
context.strokeRect(65,　5,　50,　50);
context.save();
context.strokeStyle　=　"#000099";
context.fillRect　　(125,　5,　50,　50);
context.strokeRect(125,　5,　50,　50);
context.restore();
context.fillRect　　(185,　5,　50,　50);
context.strokeRect(185,　5,　50,　50);
context.restore();
context.fillRect　　(245,　5,　50,　50);
context.strokeRect(245,　5,　50,　50);
</script>

これは、キャンバス上に描画した際の上記コードの結果です：

状態スタックの役割

キャンバスの合成モードや変換設定を変更し、変更する前に設定に戻る必要がある場合、状態スタックは非常に便利です。構図モードや変換設定を保存して復元することで、正しくリセットすることができます。そうしないと、元の正確な設定に戻ることは難しいかもしれません。

2Dのコンテキストの状態は何ですか？

すべて2Dのコンテキスト属性は状態の保存と復元の一部です。しかし、キャンバス上に描かれるものはそれではありません。これは、状態を復元する際には、描画エリア自体を復元しないことを意味します。復元するのは、2Dのコンテキスト設定（属性値）。これらの設定には、

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• クリッピングエリア

• 変換マトリックス(通過context.rotate())+ 回転+平移context.setTransform())

このリストは完全ではありません。標準の発展に伴い、さらに多くの属性が2Dコンテキスト状態の一部.