1 2 3 ctx.ctx.ctx.

要保存绘画状态，只需要调用这么一句就行了，很简单吧。

当你把当前的样式改为蓝色的时候，然后调用save方法，就会把当前的样式存入栈中。一般，绘画状态的栈是空的。

需要理解的是，栈就跟你桌子上的一沓文件一样，第一个入栈的就好像最底下的文件，后入栈的在最上面。如果你想获得最下面的文件，就得先拿掉上面的文件。可以理解为先进后出，或者后进先出。

保存绘画状态很简单，但是保存了我们总还是要取出来的吧。你可以使用restore方法。

加上下面的代码：

1 2 ctx.ctx.

然后就会画出来另一个矩形，只不过颜色不同（这次是红色）：

画完了红色的矩形，你又想画蓝色的了怎么办呢？可以手动设置成蓝色，不过这样太无聊了一点，我们试试这个方法吧：

1 2 ctx.ctx.

这会画出来另外一个蓝色的矩形：

很简单吧，调用restore方法之后，就会移除后来加入进去的样式，恢复到你存储时候的样式。这节省了很多时间。好吗，这个例子中没有节省你大量的时间，但是在做变换的时候你就体会到了。

你现在知道如何在简单的情况下使用恢复绘画状态，那么多重状态的时候怎么办呢？你应该还记得我之前提到的文件，后进，先出，我们看看下面的代码：

1 2 3 4 5 6 7 8 ctx.ctx.ctx.ctx.ctx.ctx.ctx.ctx.

虽然这和之前的代码差不多，但是在最后这点还是有很大不同的，我们最后看到的是这样：

如果想恢复最初的蓝色的状态，你需要在调用一次restore命令，所以需要添加：

1 2 ctx.ctx.

这会从栈里面移除最初添加进去的蓝色的样式，然后应用到canvas上面：

多次使用restore就能节省不少时间了。

我们这次讲的不是太多，不过有些概念还是比较复杂的，最好还是自己动手试一试吧。

在RockUX后面的文章中，我们会讲到Canvas中的转换，以及阴影和渐变。很激动人心吧。[]

转载请注明：
作者：RockUX-WEB前端
出自：【Canvas学习教程】Canvas高级特性

觉得文章有用？立即： 和朋友一起 共学习 共进步！

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习