CanvasRenderingContext2D: save() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.save() はキャンバス 2D API のメソッドで、現在の状態をスタックにプッシュすることで、キャンバス全体の状態を保存します。
構文
js
save()
引数
なし。
返値
なし (undefined)。
解説
スタックに保存される描画状態には、以下のものが含まれます。
- 現在の座標変換行列。
- 現在のクリッピング領域。
- 現在の破線リスト。
- 以下の属性の現在の値。
directionfillStylefilterfontfontKerningfontStretchfontVariantCapsglobalAlphaglobalCompositeOperationimageSmoothingEnabledimageSmoothingQualityletterSpacinglineCaplineDashOffsetlineJoinlineWidthmiterLimitshadowBlurshadowColorshadowOffsetXshadowOffsetYstrokeStyletextAligntextBaselinetextRenderingwordSpacing
例
描画状態の保存
この例は、save() メソッドを使用して既定の状態を保存し、 restore() を使用して復元しているため、既定の状態で矩形を描画できます。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 既定の状態を保存
ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
// 既定の状態を復元
ctx.restore();
ctx.fillRect(150, 40, 100, 100);
結果
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-save-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.restore()