网上搜罗了一堆资料,最后总结一下。

save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作,所以如果不对canvas进行save以及restore,那么每一次绘图都会在上一次的基础上进行操作,最后导致错位。比如说你相对于起始点每次30度递增旋转,30,60,90.如果不使用save 以及 restore 就会变成30, 90, 150,每一次在前一次基础上进行了旋转。save是入栈,restore是出栈。

  1. var canvas = document.getElementById("canvas");
  2. var context = canvas.getContext('2d');
  3. context.lineWidth = "10";
  4. context.strokeStyle = "#fe9901";
  5. context.translate(canvas.width / 2, canvas.height / 2);
  6. context.rotate( 30 / 180 * Math.PI);
  7. context.beginPath();
  8. context.moveTo(0, -180);
  9. context.lineTo(0, -200);
  10. context.stroke();
  11. context.rotate( 30 / 180 * Math.PI);
  12. context.beginPath();
  13. context.moveTo(0, -140);
  14. context.lineTo(0, -160);
  15. context.stroke();

没有使用save,restore,第一次绘制时画布旋转30度,然后按照坐标绘制直线,第二次绘制在第一次基础上继续绘制,旋转30度,实际上相对于起点,旋转了60. 所以画出来两条直线不在一条指线上。

  1. context.save();
  2. context.rotate( 30 / 180 * Math.PI);
  3. context.beginPath();
  4. context.moveTo(0, -180);
  5. context.lineTo(0, -200);
  6. context.stroke();
  7. context.restore();
  8. context.rotate( 30 / 180 * Math.PI);
  9. context.beginPath();
  10. context.moveTo(0, -140);
  11. context.lineTo(0, -160);
  12. context.stroke();

第二次绘制加入save和restore, 再第一次绘制后,resore到起始状态,也就是现在画布又回到了0度位置,而不是30度,所以第二次绘制是从0度开始绘制,绘制出来应该和第一次的直线在一条指线上。

 
 

canvas的save与restore方法的作用的更多相关文章

  1. HTML5中canvas的save和restore方法

    canvas的save和restore方法: save() 方法把当前绘画状态的一份拷贝压入到一个保存图像状态的栈中.这里的绘画状态指坐标原点.变形时的变化矩阵(该矩阵是调用 rotate().sca ...

  2. android_浅析canvas的save()和restore()方法

    <span style="font-size:18px;"> </span> <span style="font-size:18px;&qu ...

  3. canvas中save()和restore()方法

    save()和restore()方法是绘制复杂图形不可缺少的方法它们是分别用来保存和恢复canvas状态的,都没有参数 save():用来保存Canvas的状态.save之后,可以调用Canvas的平 ...

  4. canvas 中save和restore的用法

    在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方法里,我们经常会 ...

  5. Canvas的save和restore

    在onDraw方法里,我们经常会看到调用save和restore方法,它们到底是干什么用的呢? int px = getMeasuredWidth(); int py = getMeasuredWid ...

  6. HTML5 canvas save()和restore()方法讲解

    我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的.第一步是用默认设置画一个大四方形,然后保存一下状态.改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态.再次改变填充颜色 ...

  7. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  8. Canvas中的剪切clip()方法

    Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域.它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行.在默认情 ...

  9. Canvas中的save方法和restore方法

    初学者也许会误认为canvas中save方法是用来保存绘图状态的图形,而restore方法是用来还原之前保存的绘图状态的图形,其实不然. save():保存当前的绘图状态. restore():恢复之 ...

随机推荐

  1. 【python之路2】CMD中执行python程序中文显示乱码

    在IDLE中执行下面代码,中文显示正常: # -*- coding:utf-8 -*- st=raw_input("请输入内容")print st 但在CMD中执行e:\hello ...

  2. Subsets II

    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...

  3. Spring + SpringMVC + Druid + MyBatis 给你一个灵活的后端解决方案

    生命不息,折腾不止. 折腾能遇到很多坑,填坑我理解为成长. 两个月前自己倒腾了一套用开源框架构建的 JavaWeb 后端解决方案. Spring + SpringMVC + Druid + JPA(H ...

  4. 2016BUAA校赛决赛

    A. 题意:有n个点,n-1条边,1-2-3-4-5-...-n,每条边都有权值,代表走这条边的时间,时刻0一个人在点1,问从时刻1~m,有哪些时刻这个人可能走到n点 分析:将每条边当作物品,可以选1 ...

  5. 【C#】安装windows服务

    参考:http://blog.csdn.net ,http://blog.csdn.net/dyzcode 1.新建 visual studio insaller 项目2.添加 [文件系统]3.添加 ...

  6. 精灵方向移动问题[math.floor]

    local xd = math.cos(math.rad(self._direction));--self._direction方向角度 local yd = math.sin(math.rad(se ...

  7. FREEBSD手工配置网络

    在FreeBSD系统中,网络能力十分重要,对于一个标准的FreeBSD系统,至少要有一个网络界面以便与其他计算机通信.最常见的网络界面为以太网卡.此外FreeBSD也支持Token Ring和FDDI ...

  8. JQuery ajax调用一直回调error函数

    使用jquery的ajax调用,发现一直回调error函数,ajax调用代码如下,后台返回是正确的,为什么会报错呢?  var descValue = $('#descEditArea').val() ...

  9. java 枚举的简单应用。

    枚举,就是保存着原始的<key,value> 在代码中会经常用到.为了不坑自己,记录一下笔记 package com.fortunedr.common.constant; public e ...

  10. 接口测试 postman

    1.可以应用一些简单的测试点 2. api有多个域名,放进collection里面进行批量测试,点击左上角'runner'