<!DOCTYPE HTML>
<html>
<head>
<title> save restore</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.fillRect(0,0,150,150);//绘制一个矩形
cxt.save();//保存默认状态
cxt.fillStyle="#06f";//改变设置颜色
cxt.fillRect(15,15,120,120);//绘制新矩形
cxt.save();//保存当前状态
cxt.fillStyle="#FFF";//改变设置
cxt.globalAlpha=0.5;
cxt.fillRect(30,30,90,90);//绘制矩形
cxt.restore();//恢复前一个状态
cxt.fillRect(45,45,60,60);//按照前一个状态绘制矩形
cxt.restore();//恢复原始状态
cxt.fillRect(60,60,30,30);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas"></canvas>
</body>
</html>
显示效果如下：
【通过绘制多个矩形的例子来描述 canvas 的状态堆的工作原理。首先是用默认设置画一个大四方形，然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形，然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。到目前为止所做的动作和前面章节的都很类似。不过一旦调用 restore，状态堆中最后的状态会弹出，并恢复所有设置。如果不是之前用 save 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，工作量猛涨。当第二次调用 restore 时，已经恢复到最初的状态，因此最后是再一次绘制出一个黑色的四方形。】