HTML5 canvas save和restore方法讲解

save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。

Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：当前应用的变形（即移动，旋转和缩放，见下）:
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX,shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

你能够调用任意屡次 save 方法。每一次调用 restore 方法，上一个保存的状态就从堆中弹出，全部设定都恢复。

举个save 和 restore 的应用例子吧。

咱们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工做的。

第一步是用默认设置画一个大四方形，而后保存一下状态。改变填充颜色画第二个小一点的白色四方形，而后再保存一下状态。再次改变填充颜色绘制更小一点的蓝色四方形。而后咱们调用了restore方法将设置回到前一个save状态下的fillStyle＝"white"，即在不设定颜色值的状况下再绘制最小的矩形时其添充色为白色。

一旦咱们调用 restore，状态堆中最后的状态会弹出，并恢复全部设置。若是不是以前用 save 保存了状态，那么咱们就须要手动改变设置来回到前一个状态，这个对于两三个属性的时候仍是适用的，一旦多了，咱们的代码将会猛涨。 简而言之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>