本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一.

再谈clip函数，这个函数在这篇文章[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)已经有讲到过他的基本用法，我们来两个简单的例子复习一下：

 <meta charset='utf-8' />

 <style>

 #canvas,#canvas2{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     var oCanvas2 = document.querySelector( "#canvas2" ),

         oGc2 = oCanvas2.getContext( '2d' );

     oGc.beginPath();

     oGc.strokeStyle = '#09f';

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

     oGc.stroke();

     oGc.closePath();

     oGc.clip();

     oGc.beginPath();

     oGc.fillStyle = 'red';

     oGc.fillRect( 100, 100, 200, 100 );

     oGc.closePath();

     oGc2.beginPath();

     oGc2.strokeStyle = '#09f';

     oGc2.rect( 0, 0, 100, 100 );

     oGc2.stroke();

     oGc2.closePath();

     oGc2.clip();

     oGc2.beginPath();

     oGc2.fillStyle = 'red';

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

     oGc2.fill();

     oGc2.closePath();

 }

 </script>

 </head>

 <body>

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

 <canvas id="canvas2" width="500" height="400"></canvas>

 </body>

请注意，如果用矩形作为裁剪区域，用使用rect，不能使用strokeRect和fillRect，即下面这段代码不能改成strokeRect或者fillRect

oGc2.beginPath();
oGc2.strokeStyle = '#09f';
oGc2.rect( 0, 0, 100, 100 );
oGc2.stroke();
oGc2.closePath();
如果想在已经裁剪的区域中再加载一张新的图片，怎么做？
 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         oBtn = document.querySelector( "input" );

     oGc.beginPath();

     oGc.strokeStyle = '#09f';

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

     oGc.stroke();

     oGc.closePath();

     oGc.clip();

     function loadImg( imgPath ){

         var oImg = new Image();

         oImg.src = imgPath;

         oImg.onload = function(){

             oGc.drawImage( oImg, 0, 0 );

         }

     }

     loadImg( './img/mv.jpg' );

     oBtn.onclick = function(){

         loadImg( './img/mv2.jpg' );

     }

 }

 </script>

 </head>

 <body>

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

 <br/><input type="button" value="加载另一张图片">

 </body>

当点击按钮的时候，加载一张新的图片，但是加载后的图片，也产生了裁剪效果.

如果，不需要保留裁剪效果怎么做呢？利用save方法保存最初的状态，再加载图片的使用，用restore来恢复

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         oBtn = document.querySelector( "input" );

     oGc.save(); //保存画布最初的状态，即没有产生裁剪效果的

     oGc.beginPath();

     oGc.strokeStyle = '#09f';

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

     oGc.stroke();

     oGc.closePath();

     oGc.clip();

     function loadImg( imgPath ){

         var oImg = new Image();

         oImg.src = imgPath;

         oImg.onload = function(){

             oGc.drawImage( oImg, 0, 0 );

         }

     }

     loadImg( './img/mv.jpg' );

     oBtn.onclick = function(){

         oGc.restore(); //恢复画布最初始的状态

         loadImg( './img/mv2.jpg' );

     }

 }

 </script>

 </head>

 <body>

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

 <br/><input type="button" value="加载另一张图片">

 </body>

再次点击之后，就没有产生裁剪效果了

保存与恢复变形状态，如果一个形状产生多次平移效果，如果没有保存和恢复状态，那么平移相对的是他上一次变化后的状态

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         oBtn = document.querySelector( "input" );

     // oGc.save();

     oGc.beginPath();

     oGc.fillStyle = '#09f';

     oGc.fillRect( 50, 50, 100, 100 );

     oGc.translate( 100, 100 );

     oGc.fillRect( 50, 50, 100, 100 );

     oGc.closePath();

     oGc.beginPath();

     // oGc.restore();

     oGc.fillStyle = 'red';

     oGc.translate( 150, 150 );

     oGc.fillRect( 50, 50, 100, 100 );

     oGc.closePath();

 }

 </script>

 </head>

 <body>

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

 </body>

把save()和restore打开，红色的方块将是针对第一次绘制的蓝色方块平移，而不是针对平移后的状态平移【关于平移，后面会有文章，如果你有css3的基础。这个跟css3是一样的，就是相对原来的位置进行平移， 不过这里要注意一点，平移这个动作是写在渲染(fillRect)之前】

保存与恢复字体相关样式

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         oBtn = document.querySelector( "input" ),

         text = '跟着ghostwu学习html5 canvas';

     oGc.font = 'bold 30px 微软雅黑';

     oGc.fillStyle = '#09f';

     // oGc.save();

     oGc.fillText( text, 12, 60 );

     oGc.fillStyle = 'red';

     oGc.fillText( text, 12, 160 );

     // oGc.restore();

     oGc.fillText( text, 12, 260 );

 }

 </script>

 </head>

 <body>

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

 </body>

打开注释的save和restore状态之后，第三行文字就会应用到保存之前的状态（天蓝色：oGc.fillStyle = '#09f';）

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  2. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  3. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  4. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  5. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  6. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  7. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  8. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  9. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

  1. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

  2. 浏览器F12进行Web程序调试

    转自http://www.cnblogs.com/yougewe/p/5152700.html 引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东 ...

  3. 使用Coding.net+Hexo+node.js+git来搭建个人博客

    使用Coding.net来搭建基于Hexo的博客 一.准备工作 什么是Coding.net Coding可以说,就是国产的Github,但是,有一个功能使它似乎超越了GitHub-那就是 Web ID ...

  4. Spring AOP术语解释

    话说,越来越感觉有些人解释概念真的是晦涩难懂,我刚开始学习Spring aop时,对那些切入点,连接点,引入等概念搞得头疼.太多人就直接照搬定义,让我们这些初学者如何理解啊.下面是我找了大量的博客,终 ...

  5. 高级java高并发，高性能，分布式，高可用，负载均衡，系统架构实战

    java架构师.集群.高可用.高可扩 展.高性能.高并发.性能优化.Spring boot.Redis.ActiveMQ.Nginx.Mycat.Netty.Jvm大型分布 式项目实战 视频课程包含: ...

  6. jQuery EasyUI弹出确认对话框(确认操作中.....)

    因为毕业设计的原因,在初期设计系统的时候没有考虑功能的正确性,所以很多的功能都没有加验证和确认的操作,给人在操作方面上有一些不好的感觉(可能失误点击后,数据就别删除,或者增加了),所以在网上找了一些资 ...

  7. hdu 6199 沈阳网络赛---gems gems gems（DP）

    题目链接 Problem Description Now there are n gems, each of which has its own value. Alice and Bob play a ...

  8. 持续交付Jenkins使用

    简介 Jenkins是一个独立的开源自动化服务器,可用于自动化各种任务,如构建,测试和部署软件.Jenkins可以通过本机系统包Docker安装,甚至可以通过安装Java Runtime Enviro ...

  9. ant安装以及环境变量配置、验证

    (一)安装 ant 下载地址: http://ant.apache.org/     根据自己电脑下载对应版本 下载完成以后,可自行解压到自己常用的盘中,但是要记住解压到哪里了,以便后续的环境变量配置 ...

  10. Spring MVC入门讲解

    一.Springmvc是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想, 将web层进行职责解耦,基 ...