save メソッド

この記事が対象とする仕様

	HTML5 HTML構文	◎	対象です。
	HTML5 XHTML構文	◎	対象です。

出典：HTML Canvas 2D Context 2012年3月7日 Editor's Draft版 http://dev.w3.org/html5/2dcontext/

現在の描画状態を一時的に保存します。保存した状態はresotreメソッドで元に戻すことができます。

１．構文

void save();

パラメーター

なし

２．解説

保存対象となる描画状態とは以下の値です。

現在のtransformation matrix
現在のclipping region
strokeStyleプロパティ
fillStyleプロパティ
globalAlphaプロパティ
lineWidthプロパティ
lineCapプロパティ
lineJoinプロパティ
miterLimitプロパティ
shadowOffsetXプロパティ
shadowOffsetYプロパティ
shadowBlurプロパティ
shadowColorプロパティ
globalCompositeOperationプロパティ
fontプロパティ
textAlignプロパティ
textBaselineプロパティ

現在のグラフィックパスは保存されません。グラフィックパスはbeginPathメソッドでのみリセットできます。また、現在のbitmapはCanvasRenderingContext2DオブジェクトではなくCanvasオブジェクトの状態のためこのメソッドでは保存できません。

保存した内容はCanvasRenderingContext2Dオブジェクトが消滅すると同時に破棄されます。

また、saveメソッドを複数回読んで複数の状態を保存することができます。この場合、保存はスタック構造になっておりrestoreメソッドを複数回呼ぶことで復元できます。たとえば、3回のsaveメソッドで保存された状態は3回のrestoreメソッドで復元できます。

３．例

次の例はfillStyleをsaveメソッドで保存した後変更し、restoreメソッドでもとのfillStyleに復元します。

//赤い四角形を描画
g.fillStyle = 'red';
g.fillRect(10, 10, 40, 40);

//fillStyleを保存
g.save();

//青い四角形を描画
g.fillStyle = 'blue';
g.fillRect(30, 30, 40, 40);

//fillStyleを復元(fillStyleは'red'に戻る。)
g.restore();

//赤い四角形を描画
g.fillRect(50, 50, 40, 40);

４．プラットフォーム

HTML5

IE9