第一章 基础知识
第二节 Canvas的绘图环境
Canvas的API提供了两个名叫save()和restore()的方法,用于保存及恢复当前canvas绘图环境的所有属性。可以像下面讲的这样使用这两个方法:
function drawGrid(strokeStyle, fillStyle) {
controlContext.save(); // Save the context on a stack
controlContext.fillStyle = fillStyle;
controlContext.strokeStyle = strokeStyle;
// Draw the grid...
controlContext.restore(); // Restore the context from the stack
}
save()与restore()方法也许看上去没什么大不了的,不过一旦开始使用Canvas进行开发,就会发现它们其实是不可或缺的功能。这两个方法的用法总结在表1-4之中。
提示:save()与restore()方法可以嵌套式调用
绘图环境的save()方法会将当前的绘图环境压入堆栈顶部。对应的restore()方法则会从堆栈顶部弹出一组状态信息,并据此恢复当前绘图环境的各个状态。这意味着可以嵌套式地调用save()/restore()方法。
表1-4 CanvasRenderingContext2D之中与状态操作有关的方法
提示:绘图表面的保存与恢复
本小节向读者演示了如何对绘制环境对象的状态进行保存与恢复。与此同时,绘图表面的保存与恢复也是很有用的功能,我们将在1.7节之中讲述这个问题。