第一章 基础知识

第二节 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()方法。

 CanvasRenderingContext2D之中与状态操作有关的方法

表1-4 CanvasRenderingContext2D之中与状态操作有关的方法

    提示:绘图表面的保存与恢复

    本小节向读者演示了如何对绘制环境对象的状态进行保存与恢复。与此同时,绘图表面的保存与恢复也是很有用的功能,我们将在1.7节之中讲述这个问题。