HTML 5 canvas saveとrestoreの方法の説明

save()とrestore()の方法は複雑な図形を描くのに欠かせない方法である.これらはcanvas状態を保存および復元するために使用され、パラメータはありません.
Canvas状態はスタック(stack)で保存され、saveメソッドが呼び出されるたびに現在の状態がスタックに押し込まれて保存されます.この状態には、現在適用されている変形(すなわち、移動、回転、スケール)が含まれます.
strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,shadowOffsetX,shadowOffsettY,shadowBlue,shadowColor,globalCompositeOperationの値
任意のsaveメソッドを複数回呼び出すことができます.restoreメソッドを呼び出すたびに、前回保存した状態がスタックからポップアップされ、すべての設定が復元されます.
saveとrestoreの応用例を挙げましょう.
この連続矩形の例を用いてcanvasの状態スタックがどのように動作するかを記述しようとした.最初のステップは、デフォルト設定で大きな四角形を描き、ステータスを保存します.塗りつぶし色を変更して2番目に小さい白い四角形を描き、状態を保存します.塗りつぶしカラーを変更して、より小さな青の四角形を描画します.次に、restoreメソッドを呼び出して、前のsave状態のfillStyle=「white」に設定を戻します.すなわち、色値を設定せずに最小の矩形を描画すると、その充填色が白色になります.
restoreを呼び出すと、ステータススタックの最後のステータスがポップアップされ、すべての設定が復元されます.以前にsaveでステータスを保存していなかったら、手動で設定を変更して前のステータスに戻る必要があります.これは2、3つのプロパティに適用され、多くなるとコードが急増します.簡単に言えばrestoreメソッドは,対応する現在のsave状態での設定をすべて前の状態に復元することと理解できる.

  ：
<script type="text/javascript">
window.onload=function(){
 var ctx=document.getElementByIdx_x_x("canvas").getContext("2d");
 ctx.fillRect(10,10,150,150);

 ctx.save();
 ctx.fillStyle="white";
 ctx.fillRect(30,30,110,110);

 ctx.save();
 ctx.fillStyle="blue";
 ctx.fillRect(50,50,70,70);
 ctx.restore();//       ,  ctx.fillStyle="white";

 ctx.save();
 ctx.fillRect(70,70,30,30);//        fillStyle      white，   ！          restore      fillStyle     
 ctx.restore();
}
</script>