《HTML5 canvas开发详解（第2版）》——2.3 Canvas状态

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第2章，第2.3节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3　Canvas状态

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

• 变换矩阵信息。例如旋转或平移时，使用context.rotate()方法和context.setTransform()方法。
• 当前剪贴区域。
• 画布属性的当前值，如下所示（但不局限于此）。

——globalAlpha
——globalCompositeOperation
——strokeStyle
——textAlign, textBaseline
——lineCap, lineJoin, lineWidth, and miterLimit
——fillStyle
——font
——shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY

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

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

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

context.save()

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

context.restore()