《HTML5 Canvas开发详解》——2.3 Canvas状态

2.3 Canvas状态

在Canvas上下文中绘图时可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。

  • 变换矩阵信息,例如旋转或平移时使用context.rotate()方法和context.setTransform()方法。
  • 当前剪贴区域。
  • 画布属性的当前值,如下所示(但不限于)。
—globalAlpha
—globalCompositeOperation
—strokeStyle
—textAlign, textBaseline
—lineCap, lineJoin, lineWidth, miterLimit
—fillStyle
—font
—shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY

本章稍后会讲到这些状态。

2.3.1 什么不属于状态
当前路径(本章稍后将探讨)和当前位图(参见第4章)受Canvas上下文控制,不属于保存的状态。这个重要的功能允许在画布上对单个对象进行绘画和制作动画。2.7节“简单画布变换”将初始化Canvas状态,以将变换应用到当前建立和绘制的形状,同时保持画布其他部分不变。

2.3.2 如何保存和恢复Canvas状态
保存(推送)当前状态到堆栈,调用以下函数。

context.save()

调出最后存储的堆栈恢复画布,使用以下函数。

context.restore()
时间: 2024-07-29 00:59:28

《HTML5 Canvas开发详解》——2.3 Canvas状态的相关文章

《HTML5 Canvas开发详解》——第2章 在Canvas上绘图2.1 本章基本文件设置

第2章 在Canvas上绘图 HTML5 Canvas的使用是以强大的绘图.着色和基本二维形状变换为基础的,然而可供选择的内建形状相对有限,程序员可以通过一组称做路径的线段来绘制出想要的形状,"2.4使用路径创建线段"将涉及相关内容. 提示:可以采用在线形式很好地了解HTML5 Canvas API.WSC网站上有详尽且不断更新的参考,具体描述了Canvas 2D绘图API的功能. 然而,这个在线参考缺少使用API的具体例子.本书避免简单地介绍各个参数的使用,将花时间通过创建示例来解释

《HTML5 canvas开发详解(第2版)》——导读

前言第2版介绍自从本书第1版发行之后,在过去的两年里,HTML5 Canvas的使用有了突飞猛进的增长.本书的第1版可以称得上是第一批介绍Canvas的专著之一.在我们为自己的快速而感到自豪同时也意味着我们曾经独自进行了大量的研究和探索.早在2011年,只有极少数HTML5 Canvas应用的例子和教程.但在2013年情形发生了改变.现在有许多关于HTML5 Canvas的资源可供选择,从框架到API,有许多网站和书籍进行专门的阐述.为了编写第2版,我们进行了大量艰辛的工作来检查在第1版中哪些部

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

1.6 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.在用Canvas处理图像和声音的时候,这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是

《HTML5 Canvas开发详解》——1.5 HTML5 Canvas版“Hello World!”

1.5 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事,就是看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.用Canvas处理图像和声音的时候这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是wi

《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节

第2章 直线图形 2.1 直线图形简介 在Canvas中,基本图形有两种:①直线图形:②曲线图形.Canvas常见的直线图形有三种,分另是直线.矩形.多边形. 这一章我们先来学习Canvas中的直线图形. 2.2 直线 2.2.1 Canvas坐标系 在学习Canvas之前,我们先来介绍一下Canvas中的坐标系是如何使用的.了解Canvas使用的坐标系是学习Canvas的最基本的前提. 我们经常见到的坐标系是数学坐标系,而Canvas使用的坐标系是W3C坐标系,这两种坐标系唯一的区别在于y轴正

《HTML5 Canvas开发详解》——1.9 第二个示例:猜字母

1.9 第二个示例:猜字母 现在来快速看一下另一个广泛提及的 "Hello World!"类型的应用程序示例--"猜字母"游戏.本章通过这个示例来说明用JavaScript编写Canvas程序比用Canvas API多了哪些工作量. 如图1-4所示的游戏当中,玩家要做的是猜出计算机从字母表中随即抽取的字母.游戏会记录玩家已经猜了多少次,列出已经猜过的字母,并且告诉玩家是需要往哪个方向猜(往Z方向猜还是往A方向猜). 1.9.1 游戏如何工作这个游戏的基本结构与&qu

《HTML5 canvas开发详解(第2版)》——第1章 HTML5 Canvas简介1.1 什么是HTML5

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧中完全重绘屏幕上的位图.作为一名程序员,所要做的就是在每一帧渲染之前设置屏幕的显

《HTML5 canvas开发详解(第2版)》——1.2 基础的HTML5页面

1.2 基础的HTML5页面 在开始讲解Canvas前,需要谈论一下HTML5的相关标准--这里将使用HTML5来创建Web页面. HTML是用于在互联网上构建页面的标准语言.本书不会将很多时间花费在讲解HTML上,但HTML是< canvas >的基础,所以不能完全跳过它. 一个基本的HTML页面分成几个部分,通常有< head >和< body >,新的HTML5规范增加了一些新的部分,例如< nav >.< article >.< h

《HTML5 canvas开发详解(第2版)》——1.11 动画版本的Hello World

1.11 动画版本的Hello World "Hello World"和"猜字母"本身都是不错的示例,但是它们都没能回答出"为什么"--究竟为什么要使用HTML5 Canvas?自创立以来,静态的图像和文字就是HTML的领域,那么画布的不同之处在哪里呢?要回答这个问题,需要创建第二个"Hello World"示例.这个示例将介绍画布与HTML上的其他显示方式的最大不同之处:动画.在这个示例中,将为"Hello Wor

《HTML5 canvas开发详解(第2版)》——2.8 用颜色和渐变填充对象

2.8 用颜色和渐变填充对象 本章已经在讨论创建基本和复杂形状时,粗略地介绍了颜色和填充样式.本节将深入探讨形状的着色和填充.除了这些简单的着色和填充外,还有很多可用的不同渐变样式.另外,Canvas还可以使用位图来填充形状(参见第4章). 2.8.1 基本填充颜色设置 Canvas fillStyle属性用来设置画布上形状的基本颜色和填充.fillStyle使用简单的颜色名称.这看起来非常简单,例如: context.fillStyle = "red"; 下面是出自HTML4规范的可