CanvasRenderingContext2D: restore() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CanvasRenderingContext2D.restore() はキャンバス 2D API のメソッドで、描画状態スタックの最上位の項目をポップすることで、直近に保存されたキャンバス状態を復元します。保存された状態がない場合、このメソッドは何も行いません。
描画状態についての詳細情報は、 CanvasRenderingContext2D.save() を参照してください。
構文
js
restore()
引数
None.
返値
なし (undefined)。
例
保存された状態の復元
この例では、現在の状態を保存するために 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);
// もっとも直近の save() の呼び出しで保存された状態を復元
ctx.restore();
ctx.fillRect(150, 40, 100, 100);
結果
仕様書
| Specification |
|---|
| HTML # dom-context-2d-restore-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.save()