本文属于《html5 Canvas画图系列教程》
在画画的时候我们很可能会有这种情况：本来正在用绿色笔画（比如树叶），突然需要用红色笔画几笔（比如花朵），但画完了之后又要换成绿色笔（继续画叶子）。
如果我们是在现实中作画，那我们可以把笔蘸上不同的墨水，画了之后又蘸上之前的墨水；或者准备几只笔，要用哪只就选哪只。
在canvas中我们也可以这样，不过我们之前说过，canvas中的画笔永远只有一只，所以我们如果要换画笔的颜色，似乎只有上面的第一种方法可行。
要真是这样，无疑十分坑爹，会让人感叹现代科技还不如毛笔好使，幸亏canvas还不至于如此不灵活。
这也就是本文要讲的：保存画布状态及还原。即canvas的save和restore方法。
他们有什么用？
设想一下，我们正在用10像素宽，颜色为红色的笔画图，然后把画笔设置成1像素宽，颜色变成绿色。绿色画完之后呢，我们想接着用10像素的红色来画，如果没有save与restore，那我们就不得不重新设置一遍画笔——如果画笔状态过多，那我们的代码就会大量增加；而且，这些设置过程是重复而乏味的。
这时候，我们就可以在红色笔的时候保存一下画布状态，然后在绿色笔画完了之后，还原一下画笔状态，之前的红色笔一瞬间就回来了！
类似的操作过程代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 | ctx.fillStyle = "rgba(255,0,0,1)"; //储存一次 ctx.save(); ctx.beginPath(); ctx.rect(300,300,110,110); ctx.fill(); //新设置一下画笔并作画 ctx.fillStyle = '#0f0'; ctx.fillRect(300,400,111,111); //还原到上次储存的地方 ctx.restore(); ctx.fillRect(300,500,111,111); |
当然，实际使用中我们的两种状态不可能只有这么简单，我们可以设置填充，描边，渐变，画面位移等等，都可以瞬间还原。这已经足以说明save,restore的强悍之处。
但他们还有更强的，比如多级还原。
多级还原是这么个意思：我们在红色的时候保存一下，设置成绿色再保存一下，最后设置成蓝色画几笔，此时开始还原，还原一次时，变成绿色状态，再还原一次，又变成红色状态。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ctx.fillStyle = "#f00"; //储存一次 ctx.save(); ctx.beginPath(); ctx.rect(300,300,20,20); ctx.fill(); ctx.stroke(); //改变画笔 ctx.fillStyle = '#0f0'; //再次储存 ctx.save(); ctx.fillRect(300,320,20,20); //再次改变画笔并作画 ctx.fillStyle = '#00f'; ctx.fillRect(300,340,20,20); //还原一次，回到绿色 ctx.restore(); ctx.fillRect(300,360,20,20); //再次还原，回到初始 ctx.restore(); ctx.fillRect(300,380,20,20); |
这个多级可以多到你受不了，但保存与还原的顺序是怎么安排的呢？他们好像没有序号吧？
请记住：最后保存的最先还原！restore总是还原离他最近的save点（已经还原的不能第2次还原到他）。
这时候我们总算找到一点现代科技的优越感了。
canvas没有“撤销”操作，只有重绘
最后用的时候直接eval(string)//string==你的代码颜色代码。
其实有更好的办法来保存。把代码写成String,用object的键来保存，用哪个调哪个不更好？
如果是撤销当前操作，该怎么实现呢？
很好很强大 [/鼓掌]
想问一下，画好的图片怎么保存到本地
如果是firefox的话,在canvas上右键,就可以当图片一样处理,如保存什么的;chrome需要写JS才行.我整理下发出来,你也可以先搜搜:canvas另存为图片,一目了然