Canvas 的save()与 restore()的详细介绍
Canvas 的save()与 restore()的详细介绍
tianyawhl
发布于 2019-04-04 10:01:28
发布于 2019-04-04 10:01:28
文章被收录于专栏：前端之攻略
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()效果跟一次是一样的，所以为绿色
注意：一般ctx.save()与ctx.restore()是成对出现的，当ctx.restore()的个数多余ctx.save()，多余的并没有效果。
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/11/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
