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

最新推荐文章于 2024-07-12 15:10:34 发布

大叶豌豆

最新推荐文章于 2024-07-12 15:10:34 发布

阅读量6.7k

点赞数 6

分类专栏： HTML5 文章标签： html5 canvas save restore 实例

本文链接：https://blog.csdn.net/dayewandou/article/details/78230380

版权

HTML5 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

新的一天又来啦，最近这些天一直是阴雨连绵的，也是醉了，不过还好今天终于可以看到灿烂的阳光了，现在这种温度，最喜欢站在太阳下晒着太阳，身上暖暖的，心情也会好很好，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()方法时，先执行的虚线和线宽的代码，也就是在保存的时候已经把虚线和线宽保存了，所以后来在执行恢复的时候就会恢复上

不过还有一个问题是，如果进行多次保存并且多次恢复的时候，那他又是什么样子的呢？先看看代码

<!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,100,100);

        ctx.save();//第二次保存
        ctx.setLineDash([10,5,15]);
        ctx.lineWidth=8;
        ctx.strokeStyle='blue';
        ctx.strokeRect(100,100,100,100);

        ctx.save();//第三次保存

        ctx.restore();//恢复第一次
        ctx.strokeRect(500,300,100,100);
        ctx.restore();//恢复第二次
        ctx.strokeRect(600,400,100,100);
        ctx.restore();//恢复第一次
        ctx.strokeRect(700,500,100,100);
    </script>
</body>
</html>

代码运行效果如下：
这里写图片描述

so？看到这个效果的时候是肿么想的？这是神他喵的恢复功能？每个都不同，哈哈
接下来给大家说一个概念，就是内存中栈的概念–栈存储的规律：先保存的，后恢复，后保存的，先恢复，ok，这个save和restore就是这样的原理给大家画一个图，方便理解下
这里写图片描述

图上面中3第一个存储到到栈中，2是第二个存储到里面的，1是最后一个存储上的，但是想要取出是就会先取出1，在取出2，在取出3，这也就解释了栈的规律，先保存的后恢复，后保存的先恢复。
这个规律如果理解的话，那么上面canvas中用save()多次存储和多次恢复的顺序就好理解了。

ok，现在就来说下那个是怎么恢复的
第一个保存的时候是canvas初始的状态，没有进行任何操作的
第二个保存的时候为虚线，线宽为4，线的颜色为红色
第三次保存的时候虚线[10,5,15],线宽为8，线的颜色为蓝色

第一次恢复的就是第三次保存的，即虚线[10,5,15],线宽为8，线的颜色为蓝色
第二次恢复的就是第二次保存的，即虚线，线宽为4，线的颜色为红色
第三次恢复的就是canvas初始的状态，默认线宽1px，黑色；

好啦，今天就写到这里吧，休息休息…..一休哥，拜拜喽！

大叶豌豆

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
canvas save()和canvas restore()状态的保存和恢复使用方法及实例

新的一天又来啦，最近这些天一直是阴雨连绵的，也是醉了，不过还好今天终于可以看到灿烂的阳光了，现在这种温度，最喜欢站在太阳下晒着太阳，身上暖暖的，心情也会好很好，o(￣︶￣)o 好啦，不扯这些闲篇了，进入正题吧，今天分享下 canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例canvas.save()用来保存先前状态的 canvas.restore()用来恢
复制链接

扫一扫

专栏目录