Html5 Canvas 中的save 和 restore

最近在学习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();}
				
			}

 

页面：

 

		<div>
				<canvas id='canvas' width='200' height='200'></canvas>
				<input type='button' value='draw' id='draw_button'/>
				<input type='button' value='redraw' id='redraw_button'/>
			</div>