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. Cocos2d-x 3.1.1 学习日志12--一Cocos2dx3.1.1移植到Android平台的方法（最实用最有效的！！）

    须要用到工具(依照顺序): 1.JDK 2.NDK 3.ANT 4.Adt-bundle-windows 将JDK文件夹下的bin文件夹路径加入到系统环境变量中. 解压NDK 解压Adt-bundle ...

  2. 抓包工具Fiddler使用宝典之捕获手机报文

    Fiddler 是通过代理来实现数据捕获的.对 Android 手机来说,也是通过将网络连接的代理指向 PC 机的 Fiddler port.来实现数据包的拦截. 以下,我以我的一次实践为例,向大家介 ...

  3. Android进阶图片处理之三级缓存方案

    图片的三级缓存 一.概述 一開始在学习Android的时候.处理图片的时候,每次获取图片都是直接从网络上面载入图片. 可是在开发项目的过程中,每次点击进入app里面,图片都要慢慢的再一次从网络上面载入 ...

  4. 自己定义验证器——用Struts2框架以框架师的思维灵活做好该事情

    面对的问题:自己定义一个18位身份验证器.编写验证器.在validators.xml文件里进行注冊.在验证配置文件里使用? 第一部分:理解Struts2中自带的验证器 第二部分:如何通过server( ...

  5. java读取Excel表格中的数据

    1.需求 用java代码读取hello.xls表格中的数据 2.hello.xls表格 3.java代码 package com.test; import java.io.File; import j ...

  6. session与cookie的理解

    噶,nation同志又给我布置任务了~~是隔壁家老王提到多次的,session和cookie的运行机制问题~~于是我真的意识到一个问题,程序猿都是一个德行! 1. cookie概述 cookie 常用 ...

  7. div内鼠标坐标位置及绝对和相对坐标获取

    JQuery 获得div绝对,相对位置的坐标方法   1 2 3 4 5 6 获取页面某一元素的绝对X,Y坐标 var X = $('#DivID').offset().top; var Y = $( ...

  8. centos7和redhat7的比特币环境搭建

    比特币版本是 bitcoin-0.12 问题1: [root@localhost bitcoin-master]# ./autogen.sh  which: no autoreconf in (/us ...

  9. bzoj 4603 平凡的骰子

    题目大意: 思路: 首先我们需要求出整个凸多面体的重心 可以通过把多面体剖分为四面体 求出每个四面体的重心 四面体的重心为四个点的坐标和/4 对每个四面体的重心 加上它们体积的权 加权平均数即为整个的 ...

  10. Watir: element_by_xpath 的使用

    b =Watir::IE.new b.goto'http://www.google.com/' txt =b.element_by_xpath("//*[@name='q']") ...