Html5 Canvas 中的save 和 restore

qiaoqinqie

最近在学习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>