Canvasの状態を保存しておくには?
解説
コンテキストオブジェクトで指定できる線の形状や塗りつぶしの色は、
いったん指定するとその状態が維持されます。
たとえば、一度「context.fillStyle = "red";」と指定すると、
それ以降に描画される図形の塗りつぶしの色はすべて赤になります。
毎回色などを指定しなくてよいメリットはありますが、不都合が生じることもあります。
例として、一部の機能を関数に切り出した場合、関数の中で塗りつぶし色を変更すると、
関数の呼び出し側の状態まで変わってしまうということがあります。
このようなことを避けるために、コンテキストの状態を保存するsave()メソッドと、
元に戻すrestore()メソッドが用意されています。
次の例では、fillStyleが赤である状態を保存しておき、いったん青に変更した後、
restore()メソッドで元の赤の状態に戻しています。
context.fillStyle = "red";
context.fillRect(20,20,40,80);
context.save();
context.fillStyle = "blue";
context.fillRect(80,20,40,80);
context.restore();
context.fillRect(140,20,40,80);
save()メソッドで保存される状態には、次のものがあります。
- 変換マトリックス
- クリップ領域
- strokeStyle, fillStyle
- globalAlpha
- lineWidth, lineCap, lineJoin, miterLimit
- shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
- globalCompositeOperation
- font, textAlign, textBaseline
描画処理を関数に切り出すときは、関数の処理の先頭でsave()メソッドを、終了直前にrestore()メソッドを呼び出すとよいでしょう。
関連項目
Canvasとは
線の形状を設定するには?
線や塗りつぶしの色を指定するには?
図形を変形させて描画するには?
図形の重なり具合を指定するには?
図形に影をつけるには?
文字列を表示するには?