Canvas 的save()与 restore()的详细介绍

save()和restore()是用来保存和恢复canvas状态的，都没有参数。 Canvas的状态就是当前画面应用的所有样式和变形的一个快照。

Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：

1、当前应用的变形（即移动，旋转，和缩放）

2、strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,shadowOffsetX,shadowOffsetY
shadowBlur,shadowColor,globalCompositeOperation的值

3、当前的裁剪路径(clipping path)

你可以调用任意多次save方法

每一次调用restore方法，上一次保存的状态就从栈中弹出，所有设定都恢复。

例一

 function draw(){
   var ctx = document.getElementById("canvas").getContext("2d");
   ctx.fillRect(0,0,150,150);
   ctx.save();  //默认设置
   ctx.fillStyle = "#09f";
   ctx.fillRect(15,15,120,120); //填充当前设置的#09f颜色
   ctx.restore();
   ctx.fillRect(30,30,90,90); //填充默认的黑色
 }

例二

<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = "pink";
ctx.lineWidth = 3;
ctx.save();//默认设置
function drawLine(){
  ctx.beginPath();
  ctx.moveTo(50,50);
  ctx.lineTo(100,100);
  ctx.stroke();
}
 function draw(){
   ctx.strokeStyle = "green";
   ctx.save();
   ctx.restore();
   ctx.restore();
   drawLine();
 }
 draw()  //线为pink  
 draw()  //线为green  
</script>

第一次执行draw() 画出的线为pink的原因：因为第一次执行js代码执行2次ctx.save()，对应着2次ctx.restore();返回到颜色为pink的状态

第二次执行只执行一次ctx.save()，执行2次的ctx.restore()效果跟一次是一样的，所以为绿色

扫描二维码关注公众号，回复： 4290703 查看本文章

注意：一般ctx.save()与ctx.restore()是成对出现的，当ctx.restore()的个数多余ctx.save()，多余的并没有效果。