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

本文属于《html5 Canvas画图系列教程

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

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

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

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

这也就是本文要讲的:保存画布状态及还原。即canvas的saverestore方法。

他们有什么用?

设想一下,我们正在用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次还原到他)。

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

《html5 Canvas画图教程13:保存画布状态与还原》有7个想法

  1. 最后用的时候直接eval(string)//string==你的代码颜色代码。

  2. 其实有更好的办法来保存。把代码写成String,用object的键来保存,用哪个调哪个不更好?

    1. 如果是firefox的话,在canvas上右键,就可以当图片一样处理,如保存什么的;chrome需要写JS才行.我整理下发出来,你也可以先搜搜:canvas另存为图片,一目了然

发表评论

电子邮件地址不会被公开。