初学者也许会误认为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. HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  2. Hangfire项目

    什么是Hangfire Hangfire 是一个开源的.NET任务调度框架,目前1.6+版本已支持.NET Core.个人认为它最大特点在于内置提供集成化的控制台,方便后台查看及监控: 另外,Hang ...

  3. 1、The Fctory Pattern（工厂模式：解决对象创建问题）

    The Fctory Pattern  处理对象创建,客户端可以申请一个对象而不用知道对象被那个class创建.可以方便地解耦对象的使用和创建,有两种实现,工厂方法和抽象工厂. Method(工厂方法 ...

  4. MySQL PRIMARY KEY 和 UNIQUE的区别

    primary key = unique +  not null unique 就是唯一,当你需要限定你的某个表字段每个值都唯一,没有重复值时使用.比如说,如果你有一个person 表,并且表中有个身 ...

  5. spark跑YARN模式或Client模式提交任务不成功（application state: ACCEPTED）

    不多说,直接上干货! 问题详情 电脑8G,目前搭建3节点的spark集群,采用YARN模式. master分配2G,slave1分配1G,slave2分配1G.(在安装虚拟机时) export SPA ...

  6. Android 开发 命名规范（基础回顾）

    标识符命名法标识符命名法最要有四种: 1 驼峰(Camel)命名法:又称小驼峰命名法,除首单词外,其余所有单词的第一个字母大写. 2 帕斯卡(pascal)命名法:又称大驼峰命名法,所有单词的第一个字 ...

  7. 【Docker】Dockerfile使用apt-get来安装jdk

    前面谈过使用wget来从oracle下载jdk安装文件是使用了cookie欺骗的方法来越过身份验证来使用Dockerfile在ubuntu内安装oracle版本的jdk的. 然而正道还是用apt-ge ...

  8. 【Nginx】关于域名转发proxy_pass

    在配置nginx的时候,有一个需求,访问m.XXX.com的时候,需要实际访问www.YYY.com/m,并且域名不能发生变化. 达成这个需求有两种做法: 第一种就是301跳转,使用rewrite来跳 ...

  9. JavaScript 函数用途

    在JavaScript中,函数可以:被赋值给一个变量,被赋值为对象的属性.作为参数被传入别的函数.作为函数的结果被返回.用字面量来创建. 1. 赋值给一个变量 //声明一个函数,接受两个参数 func ...

  10. MySql的运算符

    数据库中的表结构确立后,表中的数据代表的意义就已经确定.而通过MySQL运算符进行运算,就可以获取到表结构以外的另一种数据.例如,学生表中存在一个birth字段,这个字段表示学生的出生年份.而运用My ...