html5 Canvas画图教程13:保存画布状态与还原_H5之家

在画画的时候我们很可能会有这种情况：本来正在用绿色笔画（比如树叶），突然需要用红色笔画几笔（比如花朵），但画完了之后又要换成绿色笔（继续画叶子）。

如果我们是在现实中作画，那我们可以把笔蘸上不同的墨水，画了之后又蘸上之前的墨水；或者准备几只笔，要用哪只就选哪只。

在canvas中我们也可以这样，不过我们之前说过，canvas中的画笔永远只有一只，所以我们如果要换画笔的颜色，似乎只有上面的第一种方法可行。

要真是这样，无疑十分坑爹，会让人感叹现代科技还不如毛笔好使，幸亏canvas还不至于如此不灵活。

这也就是本文要讲的：保存画布状态及还原。即canvas的save和restore方法。

他们有什么用？

设想一下，我们正在用10像素宽，颜色为红色的笔画图，然后把画笔设置成1像素宽，颜色变成绿色。绿色画完之后呢，我们想接着用10像素的红色来画，如果没有save与restore，那我们就不得不重新设置一遍画笔——如果画笔状态过多，那我们的代码就会大量增加；而且，这些设置过程是重复而乏味的。

这时候，我们就可以在红色笔的时候保存一下画布状态，然后在绿色笔画完了之后，还原一下画笔状态，之前的红色笔一瞬间就回来了！

类似的操作过程代码如下：

	
						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的强悍之处。

但他们还有更强的，比如多级还原。

多级还原是这么个意思：我们在红色的时候保存一下，设置成绿色再保存一下，最后设置成蓝色画几笔，此时开始还原，还原一次时，变成绿色状态，再还原一次，又变成红色状态。

	
						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次还原到他）。

这时候我们总算找到一点现代科技的优越感了。