html5阴影save restore,HTML5 canvas save和restore方法讲解

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

我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的。第一步是用默认设置画一个大四方形，然后保存一下状态。改变填充颜色画第二个小一点的白色四方形，然后再保存一下状态。再次改变填充颜色绘制更小一点的蓝色四方形。然后我们调用了restore方法将设置回到前一个save状态下的fillStyle＝"white"，即在不设定颜色值的情况下再绘制最小的矩形时其添充色为白色。

一旦我们调用 restore，状态堆中最后的状态会弹出，并恢复所有设置。如果不是之前用 save 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，我们的代码将会猛涨。 简而言之restore方法就可以理解成将其对应的当前save状态下的设置全部恢复为前一个状态

代码：

window.οnlοad=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();

}