Html5 Canvas初探学习笔记(5) -绘图状态

原创 2012年03月23日 22:15:40

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

在之前的文章中,提到过一些绘图的状态值,比如线宽,和颜色。在Html5Canvas中,绘图状态指的就是2d渲染上下文外观的整套属性,包括绘制轮廓颜色,填充颜色,线宽,变换矩阵,裁减区域等。我会在之后的文章中介绍更多的状态值。本篇文章就主要讲解保存状态和恢复状态的例子,讲解这个栈的结构。

首先来看下面这个例子:

                                                        

就是简单的实例一下绘制状态的存取过程,代码如下:

存状态是通过context.save();这句来存储当前的状态,把当前的状态保存到一个栈的状态中,我们首先把red这个状态存储到栈中,然后存green时,green就压在了red上面,这样在恢复状态时context.restore();,将会把栈顶的状态,返回回来,如图的显示的颜色,先被出来的是green,而弹出的状态也就不再被保存,总结起来,saverestore就相当于栈中的pushpop方法。

如有错误,希望大家多多指正

下一篇继续研究绘制的高级功能



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bill_man/article/details/7388866

html5 canvas基础与动画开发详解

一、本课程几乎包括所有canvas常用的api用法讲解 二、包括以下案例应用: 1、坐标系绘制 2、图片裁剪与填充 3、requestAnimationFrame详解 4、七巧板绘制 5、常见运动:匀速,变速,加速,抛物线,摩擦力运动 6、边界判断与喷泉,散弹模拟效果 7、跟随鼠标而动的炫彩小球 8、下雪特效 9、色彩处理 10、运动的边界判断,边界穿透,反弹等等
  • 2017年10月30日 11:30

HTML5 Canvas 开发 绘图方法整理 【十三、Canvas重点之:状态 】

Canvas最重要的两个概念,一个是路径,另一个就是状态了。 要知道,Canvas 是基于“状态”来绘制的,每次绘制(fill() 或 stroke() )的时候都会检查一次程序中所有的“状态”, ...
  • freedomVenly
  • freedomVenly
  • 2018-02-20 13:36:03
  • 72

HTML5 之 Canvas (案例)

**星星闪动动画** 1、如何轮播一张图片上的序列帧 2、canvas的几个主要绘图API:drawImage()、save()、restore()。 3、如何处理鼠标事件 笔记: Win...
  • Hourglass314
  • Hourglass314
  • 2017-02-20 12:38:21
  • 386

HTML5 canvas绘图基本使用方法

本文介绍了html5 中canvas标签的基本使用方法,详细讲解了其重要的属性和方法...
  • u014607184
  • u014607184
  • 2016-06-26 15:20:15
  • 41785

一个html5 canvas 绘图框架

(function(win) { if (win.canvasUtils) { return; } else { var cu = win.canvas...
  • qin9r3y
  • qin9r3y
  • 2014-03-14 13:55:50
  • 3926

HTML5 canvas 在线画笔绘图工具(二)

Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton、TColorButton)组成,因为之前我大部...
  • gongztPM
  • gongztPM
  • 2015-02-25 21:36:11
  • 2062

HTML5 Canvas 绘图方法整理 【十五、Canvas页面交互: 鼠标事件 】

在Canvas中 鼠标事件分为以下三种: 1、鼠标按下 : mousedown 2、鼠标松开 : mouseup; 3、鼠标移动 : mousemove 一般需要用到...
  • freedomVenly
  • freedomVenly
  • 2018-02-20 23:05:35
  • 113

HTML5使用Canvas绘图小例

首先定义canvas标签,获取这个对象后,得到 CanvasRenderingContext2D对象 var canvas = document.getElementById("myCanvas"...
  • mfcing
  • mfcing
  • 2015-10-12 21:01:27
  • 3164

使用HTML5的Canvas标签实现绘图板内拖拽元素

使用javascript的全局变量+(鼠标的移动、按住和放开的这3个事件)实现拖拽事件,利用Canvas进行绘图实现 画布内元素的拖拽。...
  • baidu_27133421
  • baidu_27133421
  • 2017-10-25 21:53:50
  • 295

浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)

HTML5的Canvas的功能可谓是非常强大,它可以做出很多炫酷的效果,从而更好的增加用户的体验。今天我们就来一起看下HTML5一些常用的API,个人根据实际的使用把它再次进行一次封装,使用起来感觉更...
  • u013064109
  • u013064109
  • 2016-07-10 17:09:06
  • 3750
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(5) -绘图状态
举报原因:
原因补充:

(最多只允许输入30个字)