画布状态

CanvasRenderingContext2D 渲染环境包含了多种绘图的样式状态(属性有线的样式、填充样式、阴影样式、文本样式)。

Canvas 的 API 提供了两个名叫 CanvasRenderingContext2D.save()CanvasRenderingContext2D.restore() 的方法,用于保存及恢复当前 Canvas 绘画环境的所有属性。其中 CanvasRenderingContext2D.save() 可以保存当前状态,而 CanvasRenderingContext2D.restore() 可以还原之前保存的状态。

这两个方法在绘图中有着重要的作用,比如我们在绘图的时候需要使用多种颜色,颜色需要不时的切换。那么使用 save()restore() 方法即可比较方便地实现此功能。

save

CanvasRenderingContxt2D.save() 是 Canvas 2D API 通过将当前状态放入栈中,保存 Canvas 全部状态的方法。

restore

CanvasRenderingContxt2D.restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态,将 Canvas  恢复到最近的保存状态的方法。 如果没有保存状态,此方法不做任何改变。

当该方法和 save 一起使用时,恢复到 ctx.save 保存时的状态。

状态和非状态

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

下面是存储在状态堆栈的数据列表。

  • 当前的坐标变换(变换矩阵)信息,比如旋转或平移时使用的 rotate()setTransform() 方法
  • 当前剪贴区域
  • 图形上下文对象(CanvasRenderingContext2D)的当前属性值

CanvasRenderingConext2D 的当前属性值主要包括:

属性默认值描述
canvas-取得画布 <canvas> 元素
fillStyle#000000填充路径的当前的颜色、模式或渐变
strokeStyle#000000指定线段颜色
globalCompositeOperationsource-over指定颜色如何与画布上已有颜色组合(合成)
lineCapbutt指定线段端点的绘制方式
lineJoinmiter指定线段端点的绘制方式
lineWidth1绘制线段的宽度
miterLimit10lineJoinmiter 时,这个属性指定斜连接长度和二分之一线宽的最大比率
shadowColorrgba(0, 0, 0, 0)指定阴影颜色
shadowBlur0指定阴影模糊度
shadowOffsetX0指定阴影水平偏移值
shadowOffsetY0指定阴影垂直偏移值

save()restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态推入到绘图堆栈中,而 restore() 从绘图堆栈中的顶端弹出最近保存的状态,并且根据这些存储的值来设置当前绘图状态。

简单来说,save() 主要用来保存目前 Canvas 的状态,通过 save() 函数它会将目前 Canvas 的状态推到绘图堆栈中;而 restore() 函数就是从绘图堆栈中弹出上一个 Canvas 的状态。

应用实例

制作一个扇形

在实际使用当中,save()restore() 的使用还是非常广泛的,特别是涉及到坐标系统的变换和图形变换方面。