save是用来保存canvas状态，这句话很关键，意思是指后续对canvas的操作：平移、放缩、旋转、错切、裁剪等可以恢复。

我之前一直没能理解，认为对画布的画线等操作也可以恢复，其实不是这样子的，只是平移、放缩、旋转、错切、裁剪等操作。

看w3c官网对此的说明：

w3c的说法是path和render context's bitmaps不支持状态的恢复。

看完整的示例代码：

<!doctype html>

<html lang="en">

<head>

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>

<meta charset="UTF-8">

<title>quadraticCurveTo Example</title>

<script type="text/javascript">

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded() {

canvasApp();

}

function canvasSupport () {

return Modernizr.canvas;

}

function canvasApp(){

if (!canvasSupport()) {

return;

}else{

var theCanvas = document.getElementById("canvas");

var context = theCanvas.getContext("2d");

}

function drawScreen() {

//draw a big box on the screen

context.fillStyle = "black";

context.fillRect(10, 10, 200, 200);

//-------------------------

context.save();

context.beginPath();  //clip the canvas to a 50×50 square starting at 0,0

context.rect(0, 0, 40, 40);

context.clip();

//red circle

context.beginPath();

context.strokeStyle = "red";

context.lineWidth = 5;

context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);

//full circle

context.stroke();

context.closePath();

context.restore();

//-------------------------

//reclip to the entire canvas

context.beginPath();

context.rect(0, 0, 110, 110);

context.clip();

//draw a blue line that is not clipped

context.beginPath();

context.strokeStyle = "blue";

context.lineWidth = 5;

context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false);

//full circle

context.stroke();

context.closePath();

}

  drawScreen();

}

</script>

</head>

<body>

<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvas" width="500" height="500">

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>
//-------------------------
这两个注释之间用到了一个画面裁剪:
//指定裁剪区域(clipping region)
context.rect(0, 0, 40, 40);

//裁剪
context.clip();

在这个裁剪操作之前已经有了context.save() 操作
如果不save,restore操作，后续画的蓝色的圆是不会出来。因为已经被裁减了。（裁剪不分先后顺序）
//-------------------------
进行save,restore操作：


不进行save、restore操作


不知道大家理解了没，反正我已经理解了，多动手才能更好地做比较。

HTM5 之 Canvas save 、restore 恢复画布状态的理解的更多相关文章

  1. canvas save()和canvas restore()状态的保存和恢复使用方法及实例

    canvas.save()用来保存先前状态的 canvas.restore()用来恢复之前保存的状态 注:两种方法必须搭配使用,否则没有效果 <!DOCTYPE html> <htm ...

  2. Android中canvas.save()和canvas.restore()的使用

    自己定义控件时经常遇到重写View的Ondraw()方法,Ondraw()方法经常设计到save()和restore()这两个方法.这两个相互匹配出现的,作用是用来保存画布的状态和取出保存的状态的. ...

  3. Android canvas.save()与canvas.restore()的使用总结

    含义canvas.save(); 画布将当前的状态保存canvas.restore(); 画布取出原来所保存的状态使用 canvas.save();与canvas.restore();一般结合使用,. ...

  4. android学习6——canvas的save,restore作用

    先看如下代码 public class SaveRestoreActivity extends Activity { @Override public void onCreate(Bundle sav ...

  5. 【canvas学习笔记六】状态保存和变换

    save()和restore() save() 保存当前状态,将当前canvas的状态存入栈中. restore() 恢复之前save的一个状态,将之前的状态从栈中弹出. 保存的当前状态包含以下信息: ...

  6. xen save/restore 过程

    以下分析基于 xen4.2.3, 虚拟机都是hvm模式 使用libxl库有两种方式启动一个虚拟机,一种是 xl create xx.conf , 这种方式从一个配置文件开始启动一个虚拟机,速度相对较慢 ...

  7. Android Canvas save和restoreToCount

    @Override public void draw(Canvas canvas) { if (mDrawable!=null) { int sc=canvas.save(); if (mAnimat ...

  8. Android课程---Activity中保存和恢复用户状态

    onSaveInstanceState 保存 在暂停之后和保存之前调用 onRestoreInstanceState 恢复 再启动之后和显示之前调用 package com.example.chens ...

  9. Pvmove中断后恢复LV状态

    Pvmove中断后恢复LV状态   pvmove执行时关闭中断窗口后,pvmove进程会被强制杀掉,从而导致lv的状态异常,无法重新进行pvmove和其他lvm镜像增加相关操作,可以通过如下方式修复: ...

随机推荐

  1. SQL参数化查询的问题

    最近碰到个问题, SQL语句中的 "... like '%@strKeyword%'"这样写查不出结果, 非的写成 "... like '%" + strKey ...

  2. 开放搜索服务OpenSearch

    开放搜索服务系统架构:从系统.平台到开放服务 搜索是各类网站和数据类APP的标配功能.目前开发者一般基于开源搜索系统,例如ElasticSearch.Solr.Sphinx等自己搭建搜索服务,系统定制 ...

  3. 从零开始学Xamarin.Forms(二) 环境搭建、创建项目

    原文:从零开始学Xamarin.Forms(二) 环境搭建.创建项目 一.环境搭建 Windows下环境搭建:     1.下载并安装jdk.Android SDK和NDK,当然还需要 VS2013 ...

  4. 黄聪：Microsoft Enterprise Library 5.0 系列教程(七) Exception Handling Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(七) Exception Handling Application Block 使用企业库异常处理应用程序模块的 ...

  5. 让浏览器支持 jquery ajax load 前进、后退 功能

    BEGIN; 一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现. 近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工 ...

  6. Android 纯代码加入点击效果

    项目中非常多的Button, 同一时候配置非常多button切图,Selector是不是非常烦, 使用以下这个类,就能够直接为Button添加点击效果. 不用多个图片,不用Selector. 使用方法 ...

  7. An Overview of Complex Event Processing

    An Overview of Complex Event Processing 复杂事件处理技术概览(一) 翻译前言:我在理解复杂事件处理(CEP)方面一直有这样的困惑--为什么这种计算模式是有效的, ...

  8. 在JAVA中使用LUA脚本记,javaj调用lua脚本的函数（转）

    最近在做一些奇怪的东西,需要Java应用能够接受用户提交的脚本并执行,网络部分我选择了NanoHTTPD提供基本的HTTP服务器支持,并在Java能承载的许多脚本语言中选择了很久,比如Rhino,Jy ...

  9. iOS Crash获取闪回日志和上传server

    首先我们整理常常会闪退的异常哪些:数组越界.空引用.引用没有定义方法.内存空间不足等等. 怎样获取crash闪退日志 -- 工具查看 先看第一个问题怎样查看,我搜索的方法有下面几个: 第一个方法:XC ...

  10. Objective-C代码块语法(block)使用

    和其它变量本质上相似的代码块.所不同的是,数据存储代码块是主体的函数. 使用的代码块被,你可以像打电话一样等标准功能,传入参数的数量,并获得返回值. 插入符号(^)语法标记块.我们熟悉的参数按照规约定 ...