状态保存与恢复

通过前面的学习，我可以看到，每次图形绘制其实都带着非常丰富的状态。

在绘制复杂图形的时候，就会带来重复获取样式的问题。

如何优化呢？

canvas 状态的保存与恢复

  1. ctx.save() //保存
  2. ctx.restore() //恢复

canvas 状态就是当前所有样式的一个快照。

save 和 restore 方法是用来保存和恢复 canvas 状态的。

canvas 状态存储在栈中，每次 save 的时候，当前的状态就被推送到栈中保存。

一个 canvas 状态包括：

  • strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit 的值
  • 当前的裁切路径
  • 当前应用的变形你可以调用任意多次 save 方法。

每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

举例

  1. ctx.fillRect(20, 20, 200, 200) // 使用默认设置，即黑色样式，绘制一个矩形
  3. ctx.save() // 保存当前黑色样式的状态
  5. ctx.fillStyle = '#ff0000' // 设置一个填充样式，红色
  6. ctx.fillRect(30, 30, 200, 200) // 使用红色样式绘制一个矩形
  8. ctx.save() // 保存当前红色样式的状态
  10. ctx.fillStyle = '#00ff00' // 设置一个新的填充样式，绿色
  11. ctx.fillRect(40, 40, 200, 200) // 使用绿色样式绘制一个矩形
  13. ctx.restore() // 取出栈顶的红色样式状态，恢复
  14. ctx.fillRect(50, 50, 200, 200) // 此时状态为红色样式，绘制一个矩形
  16. ctx.restore() // 取出栈顶的黑色样式状态，恢复
  17. ctx.fillRect(60, 60, 200, 200) // 此时状态为黑色样式，绘制一个矩形

运行效果如下：

状态保存与恢复