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

你的名字 2021-09-17 03:36 266阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70][]

好啦，不扯这些闲篇了，进入正题吧，今天分享下   
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>

代码效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 1][]

大家可以看到，在最上面的时候在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>

代码效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 2][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70]: /images/20210813/98835e5a4e984fd9a1c232803bd8cc60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 1]: /images/20210813/bbf0f8e269134ae0ad6b0693f22f3692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 2]: /images/20210813/ca58b8183617453d9d8702113a017b91.png