初学者也许会误认为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. POJ2299 Ultra-QuickSort (JAVA)

    思路是分治,和归并排序一模一样,只是在归并的过程中,顺便统计后半部分序列比前半部分序列小的有多少个 但一直WA,最后是结果数量比较大,会超过int,用long就ac了..做题真坎坷 贴AC代码 imp ...

  2. Openfire服务端源代码开发配置指南[转]

    转自:http://www.micmiu.com/opensource/openfire/openfire-src-config/   本文将图文介绍如何把openfire(以3.8.1为例)源码配置 ...

  3. jQuery 与 js的入口函数写法

    //js的入口函数执行要比jQuery的入口函数执行得晚一些. //jq的入口函数会等待页面的加载完成才执行,但是不会等待图片的加载. //js的入口函数会等待页面加载完成,并且等待图片加载完成才开始 ...

  4. 进阶篇：2.2）DFMA运用实例

    本章目的:摘录一些DFMA运用的实例,可做参考. 1.DFMA的运用实例 DFMA提供了一个从装配和制造的角度去分析已给定设计的系统方法.采用这种方法可以使得产品结构更简单.性能更可靠.装配和制造的成 ...

  5. 进阶篇：4.2.6）DFMEA故障库的建立与积累

    本章目的:DFMEA故障库的建立与积累. 1.故障库的认知 故障库是一种数据库,只是这个数据库中储存的是故障模式,也就是失效模式. 从前文DFMEA章节的学习中,我们可以知道,DFMEA对不同层级的失 ...

  6. Excel2007使用SQL语句

    Excel2007使用SQL语句 假如金三导出表格如下:[入库查询dddd.xls] 第1步 第2步 第3步 找到[入库查询dddd.xls] 比如 SELECT 纳税人名称, sum(实缴金额) F ...

  7. CDH集群安装配置（二）- 公共环境的配置和虚拟机的克隆

    1. 配置网络-ip地址设置静态 vi /etc/sysconfig/network-scripts/ifcfg-eth33 增加如下配置 ONBOOT=yes BOOTPROTO=static IP ...

  8. git设置core.autocrlf

    背景: 使用虚拟机共享windows文件夹,文件夹中用git clone 一个仓库.在linux下编辑文件,用git status发现几乎所有的文件都为修改状态.   原因: windows下和lin ...

  9. ImportError: libSM.so.6: cannot open shared object file: No such file or directory

    Solution sudo apt-get install libsm6 Similarly ImportError: libXrender.so.1: cannot open shared obje ...

  10. Java - String中的==、equals及StringBuffer（转自CSDN 作者：chenrui_）

    equals是比较值/对象是否相同,==则比较的是引用地址是否相同. ==  如果是基本类型则表示值相等,如果是引用类型则表示地址相等即是同一个对象 package com.char3; public ...