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