简单示例理解save和restore方法

       H5为我们提供了丰富的绘图支持，在使用提供的方法进行绘图时，有两个方法是经常用到的，那就是save()和restore()，下面我通过一个简单的示例理解一下H5中的save()和restore()，示例代码如下（省略了html总的代码，直接上js）：

var canvas = document.getElementById('my_canvas') //首先通过ID获取到Canvas

var context = canvas.getContext('2d') //然后获取context对象

context.fillStyle = "green" //设置填充样式为绿色

context.fillRect(100,100,200,200) //绘制矩形

context.save() //保存Canvas状态

context.fillStyle = "blue" //设置填充样式为蓝色

context.fillRect(120,120,160,160) //绘制矩形

context.save() //保存Canvas状态

context.fillStyle = "red" //设置填充样式为红色

context.fillRect(140,140,120,120) //绘制矩形

context.save() //保存Canvas状态

context.fillStyle = "yellow" //设置填充样式为黄色

context.fillRect(160,160,80,80) /绘制矩形

context.restore() //回到保存的上一个状态，即红色

context.restore() //在往回返，回到保存的上上个状态，即蓝色

context.fillRect(180,180,40,40) //因此此处填充的矩形是蓝色的

       每行代码都有注释，这里不一一解释，上述运行显示效果如下：

       通过运行效果，可以看到save()相当于保存了当前canvas的状态，restore()相当于恢复到上一个状态，可以通过状态栈来理解这两个方法，save()就是把当前状态压入栈中(Push)，restore()相当于弹出栈顶状态(Pop)，当然也就回到了上一个保存的状态，所以上述代码在调用restore()之前，每绘制一个矩形都save一个状态，相当于依次将绿蓝红黄压入栈中，然后两次连续restore()，弹出黄红，回到了保存的蓝色状态，因此最后绘制的小矩形是蓝色的。