Html5 Canvas 中的save 和 restore Html5

最近在学习html5的canvas，对其中的save 和 restore有一些疑惑

save是保存一次状态这保存所有的canvas 上下文属性。例如style， lineWidth等
把这个状态压入一个堆栈

restore 恢复上一次save的状态，从堆栈里面推出一个状态。

我弄了一个画正方形的效果边长随着点击递增
画笔的颜色在2种颜色里面循环交替

然后在每画三次的时候，恢复上一次状态
代码如下：

window.onload = function(){var Draw = function() {this.canvas = document.getElementById('canvas'); this.storkeStyles = ['#09F','#3FE']; this.count = 1; }; Draw.prototype = {init:function(){ this.ctx = this.canvas.getContext('2d'); this.ctx.lineWidth = 2; this.draw(); },draw:function(){ this.ctx.strokeRect(100 - 5*this.count,100 -5*this.count,10*this.count,10*this.count); this.ctx.save(); this.count++; this.ctx.strokeStyle = this.storkeStyles[this.count % 2]},redraw:function(){ this.ctx.restore(); }}; var draw = new Draw(); draw.init(); document.getElementById('draw_button').onclick = function(){draw.draw(); } document.getElementById('redraw_button').onclick = function(){draw.redraw(); }}

页面：

【Html5 Canvas 中的save 和 restore】