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，黑色；

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

转：https://blog.csdn.net/dayewandou/article/details/78230380

canvas save()和canvas restore()状态的保存和恢复使用方法及实例的更多相关文章

  1. Android canvas.save()与canvas.restore()的使用总结

    含义canvas.save(); 画布将当前的状态保存canvas.restore(); 画布取出原来所保存的状态使用 canvas.save();与canvas.restore();一般结合使用,. ...

  2. activity状态的保存和恢复

    activity状态的保存和恢复 一.简介 1.保存activity状态 * 保存activity状态,onSaveInstanceState这个方法会自动保存有ID的组件的状态 * 没有ID的组件或 ...

  3. Android中canvas.save()和canvas.restore()的使用

    自己定义控件时经常遇到重写View的Ondraw()方法,Ondraw()方法经常设计到save()和restore()这两个方法.这两个相互匹配出现的,作用是用来保存画布的状态和取出保存的状态的. ...

  4. Canvas状态的保存与恢复

    Canvas的API提供了save()和restore()的方法,用于保存及恢复当前canvas绘图环境的所有属性. save()与restore()方法可以嵌套调用 save()方法将当前绘图环境压 ...

  5. Android之Activity状态的保存和恢复

    系统在某些情况下会调用onSaveInstanceState()和onRestoreInstanceState() 这两个方法来保存和恢复Activity的状态. 一句话:Activity在" ...

  6. Android开发中Activity状态的保存与恢复

    当置于后台的Activity因内存紧张被系统自动回收的时候,再次启动它的话他会重新调用onCretae()从而丢失了之前置于后台前的状态. 这时候就要重写Activity的两个方法来保存和恢复状态,具 ...

  7. Activity 状态的保存和恢复

    Activity状态保存的两种情况 一.Activity状态保持概念 保存Activity的状态是非常重要的,例如我们在玩一个游戏的时候,突然来了一个电话,这个时候在接听完电话之后我们返回到游戏中,这 ...

  8. Android笔记之自定义的RadioGroup、RadioButton，以及View实例状态的保存与恢复

    效果图 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  9. 【转】Android Canvas的save(),saveLayer()和restore()浅谈

    Android Canvas的save(),saveLayer()和restore()浅谈 时间:2014-12-04 19:35:22      阅读:1445      评论:0      收藏: ...

随机推荐

  1. python转义字符——重点解释：\b,\n和\r区别

    放在最前面: 有时我们并不想让转义字符生效,我们只想显示字符串原来的意思,这就要用r和R来定义原始字符串.如:print r'\t\r' 实际输出为“\t\r”. 主要参考:AllenW的博客 转义字 ...

  2. Leetcode：338. Bit位计数

    Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate the ...

  3. 【.NET Core项目实战-统一认证平台】第十一章 授权篇-密码授权模式

    [.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章介绍了基于Ids4客户端授权的原理及如何实现自定义的客户端授权,并配合网关实现了统一的授权异常返回值和权限配置等相关功能,本篇将介绍 ...

  4. webpack4.0各个击破（2）—— CSS篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  5. HAProxy负载均衡技术

    软件负载均衡一般通过两种方式来实现:基于操作系统的软负载实现和基于第三方应用的软负载实现.LVS就是基于Linux操作系统实现的一种软负载,HAProxy就是开源的并且基于第三应用实现的软负载. HA ...

  6. MySQL Err(1024):Lock wait timeout exceeded; try restarting transaction

    查看事务是否占用被锁: SELECT * FROM information_schema.INNODB_TRX;查看里面的 trx_mysql_thread_id字段 show full proces ...

  7. FastDfs集群docker化部署

    初识分布式文件系统FastDFS- 1.分布式与集群的区别 区别:集群是个物理形态,分布式是个工作方式.只要是一堆机器,就可以叫集群,他们是不是一起协作着干活,这个谁也不知道:一个程序或系统,只要运行 ...

  8. Django学习之二：Django 项目创建 和 应用创建

    Django 项目创建 和 应用创建 创建一个Django项目 都是在相应平台的命令行环境下操作: 1. 进入用于存放项目的目录下 1.1 windows下切换目录:先进入具体的分区磁盘中如E盘就输入 ...

  9. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  10. vue生成二维码插件qrcodejs2

    1.页面 <div id="qrCode" ref="qrCodeDiv"></div> 2.导入插件 import QRCode fr ...