おっしゃ!!!セーブポイントやんけ!!!
イメージの操作・・・です。
context.save()
現在の描画状態を保存します。
保存出来るものは以下の通りです。
- 現在の変換マトリックス
- 現在の切り抜き領域
- strokeStyle
- fillStyle
- globalAlpha
- lineWidth
- lineCap
- lineJoin
- miterLimit
- shadowOffsetX
- shadowOffsetY
- shadowBlur
- shadowColor
- globalCompositeOperation
- font
- textAlign
- textBaseline
なので、セーブポイントではないです。
消えてしまったものを戻そうとするのではないのでご注意ください
あくまでも 設定A→設定セーブ→描画→設定B→描画→設定リストア→描画(設定Aの設定)
なのです。
context.restore()
saveで保存した描画状態に戻します。
var canvas1 = document.getElementById('canvas01'),
intervalObj = "",
context1 = canvas1.getContext('2d');
canvas1.width = 200;
canvas1.height = 200;
//ここに具体的な描画内容を指定する
//塗りスタイルに青色を指定する
context1.fillStyle = "rgb(0, 0, 255)";
//その描画状態を保存する
context1.save();
//塗りスタイルに赤色を指定して、塗りつぶしの四角形を描く
context1.fillStyle = "rgb(255, 0, 0)";
context1.fillRect(10,10,30,30);
//描画状態を復元して、塗りつぶしの四角形を描く
context1.restore();
context1.fillRect(150,150,30,30);