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

tianyawhl

发布于 2019-04-04 02:01:28

5K06

代码可运行

文章被收录于专栏：前端之攻略前端之攻略

运行总次数：6

代码可运行

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>