Canvas——保存和恢复绘图状态

画布绘图状态

描述某一时刻2D渲染上下文外观的整套属性,从简单的颜色值到复杂的变换矩阵及其他特性。

描述画布绘图状态的全部属性

变换矩阵、裁剪区域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign 和 textBaseline.

保存绘图状态——save()

当你保存绘图状态时,2D渲染上下文会保存一个绘图状态栈,它是一组之前保存的状态,其中最近保存的状态位于顶部——就像一张纸。绘图状态的默认栈是空的,调用save方法,就会有一个新状态被添加到这个栈。多次调用save方法,就可以将多个绘图状态逐一保存到栈中,其中最早的状态在底部。(下面的例子调用了save()方法保存了fillStyle = "red"状态。)

恢复绘图状态——restore()

通过调用restore方法,你能够自动取出最后添加到栈中的绘图状态,并将它应用于2D渲染上下文,用所保存的状态覆盖全部现有的样式。(下面的例子在设置了fillStyle = "blue"之后又调用了restore()方法恢复了之前已有的fillStyle = "red"状态。)

保存和恢复多个绘图状态

理解新增的项(状态)被添加到栈的顶部,并且它们是从栈顶部取回的。即后进先出的机制,最近保存到栈的绘图状态将是后来第一个恢复的状态。(修改前面的例子,在fillStyle = "blue"之后保存绘图状态,然后调用两次restore()方法,依次恢复了blue和red状态。)