1.保存和恢复绘图状态:

在绘制图形时,难免会重复使用某个样式,甚至有时会在不同颜色之间来回切换。

那么为了减少代码冗余,我们可以调用画布中的save()方法,来帮我们

保存一些样式和属性,这样我们就可以再通过调用restore() 方法,来再次使用这些我们曾保存好的样式和属性了!

下面看下具体代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>保存和恢复绘图状态</title>
<script type="text/javascript">
window.onload = function () {
//保存绘图状态 save
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.save(); //保存状态
context.fillRect(50, 50, 100, 100); //初始定义,绘制红色矩形
//恢复绘图状态 restore
context.fillStyle = "rgb(0,255,0)";
context.fillRect(200, 50, 100, 100); //绘制绿色矩形
context.restore(); //恢复画布状态
context.fillRect(350, 50, 100, 100); //恢复到初始定义,绘制红色矩形
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
您的浏览器暂不支持画布!
</canvas>
</body>
</html>

2.保存和恢复多个绘图状态:

多个绘图状态是如何保存的呢?

我们可以这么理解:有台复印机在大量的复印资料,最先复印的肯定是在最下层的,后来的一张张的累在上面,然后堆成一摞儿,

最上面的那份肯定是最后一次的复印操作,这个毋庸置疑!

保存状态其实就类似复印机的工作状态,最近保存的在最上层!

来看下代码怎么实现:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>保存和恢复绘图状态</title>
<script type="text/javascript">
window.onload = function () {
//保存绘图状态 save
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); context.fillStyle = "rgb(255,0,0)";
context.save();
context.fillRect(50, 200, 100, 100); //第一个保存状态,绘制红色矩形
context.fillStyle = "rgb(0,0,255)";
context.save();
context.fillRect(200, 200, 100, 100); //第二个保存状态,绘制蓝色矩形
context.restore();
context.fillRect(350, 200, 100, 100); //恢复蓝色矩形的保存状态,因为它是最后的保存状态,所以它最先恢复。
context.restore();
context.fillRect(500, 200, 100, 100); //恢复红色矩形的保存状态。
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
您的浏览器暂不支持画布!
</canvas>
</body>
</html>

交流群:225443677

canvas 保存状态的更多相关文章

  1. canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  2. 程序中保存状态的方式之Cookies

    程序中保存状态的方式之 Cookies,之前写过一篇关于ViewState的.现在继续总结Cookies方式的 新建的测试页面login <%@ Page Language="C#&q ...

  3. Activity的保存状态和状态恢复

    Activity的保存状态和状态恢复 当系统内存不足时,系统会强制结束一些不可见的Activity以节省内存资源.在某些情况下,当被强制结束的Activity再次显示时会出现一些问题. 例如:一个AP ...

  4. 程序中保存状态的方式之ViewState

    程序中保存状态的方式有以下几种: 1.Application 2.Cookie 3.Session 4.ViewState:ViewState是保存状态的方式之一,ViewState实际就是一个Hid ...

  5. Fragment、Activity 保存状态

    Activity 保存状态1. void onCreate(Bundle savedInstanceState) 当Activity被第首次加载时执行.我们新启动一个程序的时候其主窗体的onCreat ...

  6. Android 组件系列-----Activity保存状态

    本篇随笔将详细的讲解Activity保存状态的概念,也就是saving activity state. 一.Activity状态保持概念 保存Activity的状态是非常重要的,例如我们在玩一个游戏的 ...

  7. 20150309—bs的保存状态

    http:保存状态方式,传值方式 session:(会话) 默认过期时间20分钟(20分内无任何操作自动销毁),针对用户独立,一般用来存储少量信息的 存值:session[“name”]=data;( ...

  8. android 后台 activity 被系统回收 保存状态

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 活动被系统回收, 要保存状态 ,用到 活动的 在保存实例时候 的 这个方法. 当系统异常 ...

  9. (11)Web程序保存状态的几种方式,Application,Session,Cookie,ViewState

    WEb程序保存状态的方式有这样几种: 1.Application:保存在Application中的数据是全局有效的:Application里面存放的应该是访问多修      改较少并且是全局至少大部分 ...

随机推荐

  1. 2016/2/25 1、<表单验证<form></form> 2、正则表达式 3、事件

    1.<表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电 ...

  2. 大学生程序设计邀请赛(华东师范大学)B. 分词 DP

    B. 分词   有一句句子因为粘贴的时候出现了一点问题空格全部丢失了.现在给一本字典,每个词都对应这个词出现的频率(每十亿).根据这个频率,我们可以根据下面的公式算出这个词带来的收益 P(word): ...

  3. Hibernate 之 Mapping

    转自:  http://blog.csdn.net/jnqqls/article/details/8372732 从前面的介绍的Hibernate文章中我们已经对Hibernate有了一个初步的认识, ...

  4. (15)ServletConfig对象详解

    1,作用 主要是用于加载servlet的初始化参数.在一个web应用可以存在多个ServletConfig对象(一个Servlet对应一个ServletConfig对象) 2,创建时机和对象的获取 创 ...

  5. 函数 devm_kzalloc()【转】

    本文转载自:http://blog.csdn.net/jgw2008/article/details/52691568 函数 devm_kzalloc() 和kzalloc()一样都是内核内存分配函数 ...

  6. HDU2121 Ice_cream’s world II —— 最小树形图 + 不定根 + 超级点

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2121 Ice_cream’s world II Time Limit: 3000/1000 MS (J ...

  7. YTU 2405: C语言习题 牛顿迭代法求根

    2405: C语言习题 牛顿迭代法求根 时间限制: 1 Sec  内存限制: 128 MB 提交: 562  解决: 317 题目描述 用牛顿迭代法求根.方程为ax3+bx2+cx+d=0.系数a,b ...

  8. svn问题:在eclipse里面使用SVN,怎么实现版本回滚呢?

    共有4个答案 我要回答» JustForFly 回答于 2012-04-27 10:20 举报   想回到SVN服务器端的最新版本就使用 team->还原.. 想回到SVN服务器端的其它版本使用 ...

  9. 三角函数补充(反三角函数与 sec)

    1. sec=1cos Secant (sec) - Trigonometry function secx=HA

  10. bzoj2809 [Apio2012]dispatching——左偏树(可并堆)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2809 思路有点暴力和贪心,就是 dfs 枚举每个点作为管理者: 当然它的子树中派遣出去的忍者 ...