最近在學習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>