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

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

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

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

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

context.save()

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

context.restore()

        

          
        
        
        

          

          AI 代码解读