canvas 状态管理

本文简介

带尬猴，我是德育处主任

canvas 绘图时会根据当前状态来绘制。很多的 canvas 库都利用到这一特性。比如 p5.js 利用了 canvas 状态特性衍生出 push 和 pop 函数实现状态隔离（既然提到了，下一篇就讲这个）。

有兴趣了解 p5.js 的工友推荐阅读 《p5.js光速入门》。

什么是 Canvas 状态

canvas 是根据状态来绘图的。所谓的状态就是指当前画布正在使用什么填充色(fill)、什么描边色(stroke) 等样式。

比如当前的填充色(fill) 是红色，接下来所有图形的填充色都会是红色。

如果想在某一刻恢复到指定的填充色，就可以使用 canvas 提供的状态机制来实现了。

使用方法

canvas 提供了 save() 和 restore() 两个方法去操作状态。这两个方法通常也会成对出现。

• save(): “打标记”，记录当前状态
• restore(): 恢复到 save() 记录的状态

举个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

从上面的例子可以看出，经过几轮的样式修改，在绘制第四个矩形时，想使用第一个矩形的样式，只需要在设置完第一个矩形的样式时使用 save() 做个标记，之后再使用 restore() 恢复一下即可。

需要注意的是，每次绘制矩形之前都需要使用 beginPath() 告诉 canvas 要重新绘制了。不然前面所绘制的矩形会被后面设置的样式覆盖掉。这个“问题”在 《Canvas 从进阶到退学》 里也有讲到，有兴趣的工友可以去瞧瞧。

canvas 状态可以将裁剪区域还原到指定状态，可以将变形的画布还原到指定状态，还可以将大部分样式还原到指定状态。有兴趣的工友可以自己动手尝试一下~

代码仓库

⭐雷猴 Canvas

推荐阅读

👍《Canvas 从入门到劝朋友放弃（图解版）》

👍《Canvas 从进阶到退学》

👍《Canvas 10款基础滤镜（原理篇）》

👍《p5.js 光速入门》

👍《Fabric.js 从入门到膨胀》

👍《前端需要的免费在线api接口》

点赞 + 关注 + 收藏 = 学会了 代码仓库