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},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>
页:
[1]