【Canvas】save/restore

save/restoreのしくみ

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
 
function stcolor(){
    context.strokeStyle = 'red'
}
 
function line1(){
    context.beginPath();
 
        //このメソッドが呼び出された時点でのcanvasの状態を保存
    context.save();
 
    context.strokeStyle = '#999'
    context.moveTo(10,10);
    context.lineTo(100,100);
    context.stroke();
 
    context.restore();  //savaした時点でのcanvasの状態を復元
}
 
function line2(){
    context.beginPath();
    context.moveTo(200,10);
    context.lineTo(100,100);
    context.stroke();
}
 
stcolor(); 
line1();   //ラインはグレーに
line2();   //ラインは赤（セーブしたものを再現）

セーブ

29行目でstcolor 関数が呼び出され、ついで30行目でline1関数がよびだされているので、line1関数のsaveの時点での保存できるcanvasの描画状態は「context.strokeStyle = ‘red’」だけなのでこれを保存（save）します。

再　現（restore）

line1関数の最後に「context.restore()」を呼び出して保存していたもの「context.strokeStyle = ‘red’」を再現しているので、それ以降に呼び出されたline2関数に「context.strokeStyle = ‘red’」が適用される。

● 注意事項

context.restore()が呼び出された時点でそれより下の箇所にcontext.strokeStyle = ‘red’は適用されます。
context.restore()が呼び出されるとcontext.save()でセーブ（保存）されていた内容は消えます。が、context.restore()が呼び出されたよりも下の箇所でcontext.strokeStyleの設定がなければそんままセーブした内容が下の箇所に引き継がれます。