canvas save()和canvas restore()状态的保存和恢复使用方法及实例

新的一天又来啦,最近这些天一直是阴雨连绵的,也是醉了,不过还好今天终于可以看到灿烂的阳光了,现在这种温度,最喜欢站在太阳下晒着太阳,身上暖暖的,心情也会好很好,o( ̄︶ ̄)o

好啦,不扯这些闲篇了,进入正题吧,今天分享下 
canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例

canvas.save()用来保存先前状态的 
canvas.restore()用来恢复之前保存的状态 
注:两种方法必须搭配使用,否则没有效果
 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.save();//状态的保存
        ctx.setLineDash([5]);
        ctx.lineWidth=4;
        ctx.strokeStyle='red';
        ctx.strokeRect(50,50,300,300);

        ctx.restore();//状态的恢复
        ctx.arc(400,300,150,0,2*Math.PI);
        ctx.stroke();
    </script>
</body>
</html>

代码效果如下: 

大家可以看到,在最上面的时候在canvas中画了一个矩形,而且是虚线矩形,红色,线宽为5,后来又画了一个圆形 
注意并没有开辟新路径,这个圆保持了canvas默认的状态,黑色实线1px线宽,这是为什么呢? 
就是因为在定义了ctx以后,我们用了save()保存了初始的状态,在我们划圆的时候用restore恢复了初始的状态,所以为黑色实线。

再看下面这个例子上面的代码简单做了改变,但是效果却不一样了
 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="500"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.setLineDash([5]);
        ctx.lineWidth=4;
        ctx.save();//状态的保存,-----改变了保存的位置
        ctx.strokeStyle='red';
        ctx.strokeRect(50,50,300,300);

        ctx.restore();//状态的恢复
        ctx.arc(400,300,150,0,2*Math.PI);
        ctx.stroke();
    </script>
</body>
</html>

代码效果如下: 

这次发生了什么变化? 
圆圈变成了虚线,并且线宽也是4了,但是颜色没有变,为啥子嘞?就是因为使用canvas中save()方法时,先执行的虚线和线宽的代码,也就是在保存的时候已经把虚线和线宽保存了,所以后来在执行恢复的时候就会恢复上


 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值