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. mybatis中resultMap配置细则

    resultMap算是mybatis映射器中最复杂的一个节点了,能够配置的属性较多,我们在mybatis映射器配置细则这篇博客中已经简单介绍过resultMap的配置了,当时我们介绍了resultMa ...

  2. Solr 01 - 什么是Solr + Solr安装包目录结构说明

    目录 1 Solr概述 1.1 Solr是什么 1.2 Solr与Lucene的区别 2 Solr文件说明 2.1 Solr的目录结构 2.2 其他常用概念说明 2.3 创建基础文件目录 2.4 so ...

  3. java~@Async异步功能

    @Async注解,可以实现异步处理的功能,它可以有返回值,或者直接在新线程时并行执行一个任务,对于异步来说,它的执行是有条件的,你需要把异步代码块放在单独的类里,当spring在注入时,才不会相互影响 ...

  4. Chapter 5 Blood Type——31

    I stood carefully, and I was still fine. He held the door for me, his smile polite but his eyes mock ...

  5. PE知识复习之PE新增节

    PE知识复习之PE新增节 一丶为什么新增节.以及新增节的步骤 例如前几讲.我们的PE文件在空白区可以添加代码.但是这样是由一个弊端的.因为你的空白区节属性可能是只读的不能执行.如果你修改了属性.那么程 ...

  6. Django学习笔记(8)——前后台数据交互实战(AJAX)

    这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...

  7. AppBoxFuture(一): Hello Future!

      AppBoxFuture是一个快速应用框架(Rapid Application Framework),是作者十几年从事信息化建设的经验结晶.框架具备以下一些特色: 极简的分布式系统架构 根据需要可 ...

  8. C#实现以太仿DApp合约编译、部署

    在网上找了一些关于C#开发以太仿的资料,大概了解了以太仿常用名词,后续可能需要根据资料查看开源的源码进一步熟悉一下. 一.准备合约 这里准备了一个EzToken.sol合约,目前还不会solidity ...

  9. 权限管理系统之集成Shiro实现登录、url和页面按钮的访问控制

    用户权限管理一般是对用户页面.按钮的访问权限管理.Shiro框架是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理,对于Shiro的介绍这里就不多说.本篇博客主要是了解Shiro的 ...

  10. c#基础,单线程,跨线程访问和线程带参数

    using System; using System.Collections.Generic; using System.Threading; using System.Windows.Forms; ...