Canvas基础3-绘图状态的保存与恢复

今天复习两个知识点：

====================================================================

对context.save();的解释：

            2D渲染上下文可以保存一个绘图状态栈，是一组之前保存的状态

            其中最近保存的状态位于栈的顶部。

            绘图状态的默认栈是空的。

            可以多次调用save()方法，会逐一保存在栈中，有严格顺序的。

对context.restore()的解释：

   恢复画布状态，即save的状态；

====================================================================

下面通过不同的情况来分析：

1.假如上述代码中的(1)那行代码还没加，则程序的运行结果如图：

save()保存了context.strokeStyle = "rgb(255,0,0)";这个红色状态，虽然后来又有context.strokeStyle = "rgb(0,255,0)";这个绿色状态的重设制，但是经过restore()方法又把红色状态给恢复了，所以第二个矩形框是红色而不是绿色。

=================================================================================

2.上述代码不改变的情况下的结果如下图：

即保留(1)、(2)着两行代码时，结果

第一个矩形不是红色了，而是蓝色，因为我接着故意重设了context.strokeStyle = "rgb(0,0,255)"; //(1)，然后save()

保存的最顶部的也自然是蓝色了，所以第二个矩形自然也就是蓝色了。

=============================================================================

3.保留(1)那行代码，注释掉(2)那行代码，与上述1、2做了下对比

================================================================================

4、(1)、(2)都注释掉，则save()之后并没有使用恢复，导致虽然保存了context.strokeStyle = "rgb(255,0,0)";这个红色状态，

但是被之后的圆形context.strokeStyle = "rgb(0,255,0)";绿色状态给覆盖了，所以第二个矩形自然也就是绿色的了。

================================================================================

如果觉得有点绕，没关系，只要动手操作，改代码进行结果的对比，就能很好的理解绘图状态保存与恢复的作用了。

还是在此简述下吧：

设想一下，我们正在用10像素宽，颜色为红色的笔画图，然后把画笔设置成1像素宽，颜色变成绿色。绿色画完之后呢，我们想接着用10像素的红色来画，如果没有save与restore，那我们就不得不重新设置一遍画笔——如果画笔状态过多，那我们的代码就会大量增加；而且，这些设置过程是重复而乏味的。这时候，我们就可以在红色笔的时候save保存一下画布状态，然后在绿色笔画完了之后，restore还原一下画笔状态，之前的红色笔不就一瞬间就回来了吗！

注意：

最后保存的最先还原！restore总是还原离他最近的save点（已经还原的不能第2次还原到它）。

===================================================================================================

最后我想说，越接触HTML5这个东东，越发感觉那些“发明家”的伟大，强大的技术。