サイト内検索

save(), restore() メソッド

構文

context . save()

現在の状態をスタックの最後に加えます。

context . restore()

スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。

仕様

コンテキストは描画状態のスタックを維持します。描画状態は次の要素から構成されます:

現在のパスと現在のビットマップは描画状態に含まれません。現在のパスは、beginPath() メソッドを使ってリセットするまで存在し続けます。現在のビットマップは canvas のプロパティであり、コンテキストではありません。

save() メソッドは、現在の描画状態のコピーを、描画状態のスタックの最後に加えなければいけません。

restore() メソッドは、描画状態のスタックの最後のエントリーを抜き出し、取り出したエントリーに指定されている状態に、描画状態をリセットしなければいけません。もし一つも状態が保存されていなければ、何もしてはいけません。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#the-canvas-state

サンプル

save/restoreメソッドのサンプル

このサンプルでは、まず3種類の描画状態を save() メソッドを使ってスタックに追加します。このサンプルで使っている描画状態の要素は、fillStyleglobalAlpha です。

次に、中心座標を左から右へずらしながら3つの円を描画しました。それぞれの円を描画する前に、スタックに保存された描画状態を restore() メソッドで取出し、コンテキストに適用しました。

上図の通り、スタックに保存された描画状態が、それぞれの円に適用されて描画されます。canvas の描画状態はスタック方式で維持されているため、最後に保存された描画状態から順に適用される点に注意してください。

/* 描画状態を3つ保存する */
var colors = new Array("red", "blue", "green");
var alphas = new Array(0.2, 0.5, 0.8);
for(var i=0; i<=2; i++) {
  ctx.fillStyle = colors[i];
  ctx.globalAlpha = alphas[i];
  ctx.save();
}
/* 保存した描画状態を適用しながら矩形を3つ描く */
for(var i=0; i<=2; i++) {
  ctx.restore();
  ctx.beginPath();
  ctx.arc( (i+1) * 25, 50, 20, 0, Math.PI*2, false);
  ctx.fill();
}

[save() / restore() メソッドの実際のサンプル]

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 △
3 ○ 3 ○ 2 ○ 9.5 ○   3 ○
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○    

ExplorerCanvas 0002 の場合は、描画状態に適切に保存できない属性があります。前述の例では、globalAlpha 属性の値が正しく保存されません。