CanvasRenderingContext2D.save()
CanvasRenderingContext2D.save()
はキャンバス 2D API のメソッドで、現在の状態をスタックにプッシュすることで、キャンバス全体の状態を保存します。
描画状態
スタックに保存される描画状態には、以下のものが含まれます。
- 現在の変形行列。
- 現在のクリッピング領域。
- 現在の点線リスト。
strokeStyle
、fillStyle
、globalAlpha
(en-US)、lineWidth
(en-US)、lineCap
、lineJoin
(en-US)、miterLimit
(en-US)、lineDashOffset
(en-US)、shadowOffsetX
(en-US)、shadowOffsetY
(en-US)、shadowBlur
(en-US)、shadowColor
(en-US)、globalCompositeOperation
、font
、textAlign
、textBaseline
、direction
、imageSmoothingEnabled
の現在の値。
構文
void ctx.save();
例
描画状態の保存
この例は、save()
メソッドを使用して既定の状態を保存し、 restore()
を使用して復元しているため、既定の状態で長方形を描画できます。
HTML
<canvas id="canvas"></canvas>
JavaScript
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);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-save-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D
CanvasRenderingContext2D.restore()
(en-US)