初学者也许会误认为canvas中save方法是用来保存绘图状态的图形，而restore方法是用来还原之前保存的绘图状态的图形，其实不然。

　　save():保存当前的绘图状态。

　　restore():恢复之前保存的绘图状态。

　　在Canvas环境中绘图时，可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。

  • 当前的坐标变换（变换矩阵）信息，比如旋转或平移时使用的rotate()和setTransform()方法
  • 当前剪贴区域clip()
  • 图形上下文对象（CanvasRenderingContext2D）的当前属性值

　　CanvasRenderingContext2D的当前属性值主要包括：

属性 描述
canvas 取得画布<canvas>元素
fillStyle 填充路径的当前的颜色、模式或渐变
globalCompositeOperation 指定颜色如何与画布上已有颜色组合（合成）
lineCap 指定线段端点的绘制方式
lineJoin 指定线段连接的绘制方式
lineWidth 绘制线段的宽度
miterLimit 当lineJoin为miter时，这个属性指定斜连接长度和二分之一线宽的最大比率
shadowBlur 指定阴影模糊度
shadowColor 指定阴影颜色
shadowOffsetX 指定阴影水平偏移值
shadowOffsetY 指定阴影垂直偏移值
strokeStyle 指定线段颜色

　　上面是Canvas绘图中的状态，那么什么情形不属于Canvas状态?

　　在Canvas中当前路径和当前位图受Canvas环境控制，不属于保存状态。这个重要的功能允许在画布上对单个对象进行绘画和制作动画。

　　如上所述用堆栈的原理来解释，就是调用save()方法时，将记录当前的绘图状态，并压入一个堆栈中；接着调用restore()方法时，就会把上一次记录的绘图状态从堆栈中弹出。

　　需要注意的是，出栈的次数不能多于入栈的次数，故程序中restore()方法调用的次数不应该比save()方法多。

　　画张图来帮助理解：

　　

　　如果上面的描述还是无法帮助你理解save()和restore()两个方法的话，那我们来写一个简单的示例来帮助大家理解：

 <body>

 <!--创建一个边长为200的正方形画布-->

 <canvas id="mc" width="200" height="200" style="border:1px solid black"></canvas>

 <script type="text/javascript">

     var canvas = document.getElementById('mc'); //获取Canvas元素对应的DOM对象

     var ctx = canvas.getContext('2d');//获取Canvas上的绘图的CanvasRenderingContext2D对象

     ctx.lineWidth=3; //设置笔触线条的宽度

     ctx.translate(100,100); //将原点左边设置到画布的中间

     ctx.save(); //保存当前画布的状态，该状态包含了lineWidth=3,translate(100,100),然后其他那些属性为默认值.

     ctx.strokeStyle='red'; //设置线条颜色为红色

     //坐标系统旋转90°

     ctx.rotate(Math.PI/2);

     //画第一条直线

     ctx.beginPath();

     ctx.moveTo(-100,0);

     ctx.lineTo(100,0);

     ctx.closePath();

     ctx.stroke();

     //恢复之前保存的绘图状态

     ctx.restore();

     //再画第二条直线

     ctx.beginPath();

     ctx.moveTo(-100,0);

     ctx.lineTo(100,0);

     ctx.closePath();

     ctx.stroke();

 </script>

 </body>

　　在浏览器中看到的效果如下：

看代码可知，画两条线的代码是一样的，可是画出来的一条是垂直的红线，一条是水平的黑线。调用save()方法时，保存的状态是lineWidth=3,translate(100,100),然后其他那些属性为默认值，如默认的lineStyle为黑色。

画第一条线时，是将坐标系统旋转了90°，设置了lineStyle="red"，故画出来的是垂直的红色线；画第二条线前调用了restore()方法，即恢复为了之前保存的绘图状态，该绘图状态是坐标系统没有经过旋转的，线条颜色也默认为黑色，所以画出来的先就是我们想要得到的水平的黑色线。

Canvas中的save方法和restore方法的更多相关文章

  1. Java8新特性(一)_interface中的static方法和default方法

    什么要单独写个Java8新特性,一个原因是我目前所在的公司用的是jdk8,并且框架中用了大量的Java8的新特性,如上篇文章写到的stream方法进行过滤map集合.stream方法就是接口Colle ...

  2. JS中的call()方法和apply()方法用法总结

    原文引自:https://blog.csdn.net/ganyingxie123456/article/details/70855586 最近又遇到了JacvaScript中的call()方法和app ...

  3. MongoDB save()方法和insert()方法的区别

    MongoDB save()方法和insert()方法的区别 首先看官方文档怎么说的 Updates an existing document or inserts a new document, d ...

  4. js中的splice方法和slice方法简单总结

    slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...

  5. JS中的call()方法和apply()方法用法总结（挺好 转载下）

    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...

  6. Mapper类/Reducer类中的setup方法和cleanup方法以及run方法的介绍

    在hadoop的源码中,基类Mapper类和Reducer类中都是只包含四个方法:setup方法,cleanup方法,run方法,map方法.如下所示: 其方法的调用方式是在run方法中,如下所示: ...

  7. java 中的set方法和get方法的理解

    get的意思是获取,set的意思是设置. get方法和set方法是实现类的封装访问的很好的工具. 当类中的变量设为private 时,他的意思就是说,只能通过自身和子类的访问,但是对于别的其他的类来说 ...

  8. java8新特性：interface中的static方法和default方法

    java8中接口有两个新特性,一个是静态方法,一个是默认方法. static方法 java8中为接口新增了一项功能:定义一个或者多个静态方法. 定义用法和普通的static方法一样: public i ...

  9. Java8新特性interface中的static方法和default方法

    static方法 java8中为接口新增了一项功能:定义一个或者更多个静态方法.用法和普通的static方法一样. 代码示例 public interface InterfaceA { /** * 静 ...

随机推荐

  1. win10打开移动热点让手机连接上网教程

    概述: 为什么要这么做呢? 我笔记本插网线可以上网,但是没有买猫盒,所以只能pc开热点,让手机上网. 过程如下: 1开启移动热点,设置密码 1.1开启移动热点,截图如下: 1.2设置热点名称,密码 2 ...

  2. thinkphp3.2----实现伪静态和路由配置

    URL模式: 0.普通   http://localhost/qixin/ThinkCMF(test)_backup/index.php?g=user&m=login&a=index ...

  3. windows下webpack不是内部命令 解决方法

    安装webpack 到打包文件一路出现的各种问题 windows下webpack不是内部命令 安装完webpack后要加下环境变量 系统变量新建 NODE_PATH 变量值E:\demo\webpac ...

  4. history.back返回是浏览器错误码：ERR_CACHE_MISS

    解决方法: 如果访问的是php文件中添加:header("Cache-control: private"); 如果使用的是模板引擎(tp5):{php}header("C ...

  5. mkvirtualenv创建python虚拟环境

    为什么要创建虚拟环境呢? 如果在我们本地开发好几个项目,每个项目又用到很多第三方插件,如果没没用创建虚拟环境,那么本地项目插件就会很多很乱,如果有虚拟环境就不一样了 虚拟环境安装 pip instal ...

  6. 基于 IEEE 754 标准的 单精度浮点数计算方式 （未完成）

    def dec2bin(dec): if dec < 0: s = ' dec = dec * (-1) else: s = ' e = 127 dec = float(dec) r = int ...

  7. JSON 请求太大，无法反序列化。

    在post请求中数据太大导致报500错误.错误提示 JSON 请求太大,无法反序列化. 在config中加 <system.web.extensions> <scripting> ...

  8. Linux工具安装配置之Oracle

    对于Oracle的安装真的是心生恐惧,特别是一堆堆的依赖包.趁这次DBA在南京,实际操作一番. 两种方式,1.全新安装:2.硬拷贝 全新安装,参考下面这个介绍 http://www.cnblogs.c ...

  9. Oracle运算符收录(易忘记,但是又很重要的运算符)

    Create Table Test6( id ), name ), age ), sex ) ) 1. ||   符 字符串连接字符串,注意:文字和日期一定嵌入在单引号里面 select ID,Nam ...

  10. 【javascript】onload load ready的那些事

    首先明确一下页面加载的步骤: 1.下载解析HTML文档结构 2.加载外部脚本文件与样式表文件 3.解析并执行脚本代码 4.构造HTML DOM模型 5 .加载图片等外部文件 6.页面加载完毕 接下来, ...