Fabric.js 清空画布，甚至连画布元素也给你干掉

---

theme: smartblue

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第4篇文章，点击查看活动详情

---

本文简介

点赞 + 关注 + 收藏 = 学会了

我们可以在 Canvas 上绘制图形，同样也可以将画布上的所有内容都清空掉。

本文主要聊聊：

• 在 fabric.js 中如何清空画布；
• 和原生 canvas 对比，fabric.js 到底有多方便；
• 销毁 fabrci.js 创建的画布；
• 把 canvas 元素也销毁掉；

原生 Canvas 清空画布

某些项目中(比如绘图工具)清空画布是一个基础功能。

在原生 Canvas 中要清空画布，需要使用获取画布的宽高。

```html

```

上面的代码可以把清空画布，但如果没有了解过 canvas ，或者不熟悉的工友，看到上面的代码可能会有点懵。

但没关系，本文不是讲原生 canvas 的，如果想入门 canvas 可以移步到 《Canvas 从入门到劝朋友放弃(图解版)》

fabric.js清空画布：clear

fabric.js 提供了 clear 方法，可以直接清空画布。

为了演示这个方法，我在画布上创建了一个三角形。

```html 清空画布

fabric.js 的代码就非常语义化了。就算你没了解过 fabric.js 也应该能猜出个大概。

上面的例子中，当点击按钮时就调用 canvas.clear() 直接清空了画布。在这个过程中你根本不需要了解画布的宽高。

使用 clear 方法只会清空画布上的内容，并不会销毁画布。

可以看到清空画布后，fabric.js 的默认操作还是在的(可以框选)，这证明画布只是被清空了，并没有被销毁。

销毁 fabric 实例：dispose

除了使用 clear 方法清空画布外，fabric.js 还提供了另一个更强的方法：dispose

dispose 方法可以把 fabric.js 创建出来的实例销毁掉。

通常在页面销毁前会用到 dispose 方法。

尤其是在单页面应用中，离开页面前要调用该方法，不然重新进入这个页面，有可能会重新实例化画布。

如果离开页面前没销毁画布，在某些特殊情况下可能会出现意外效果。

```html dispose

```

从上面的例子中可以看到，在销毁画布的时候，canvas 元素也获得了自由(没被 fabric.js 劫持了)。

可以对比一下

上图是 dispose 前。

上图是使用 dispose 销毁画布之后。

将 Canvas 元素也干掉：借助 getElement

如果想在销毁画布后，将 canvas 元素也移除掉，可以借助 getElement 获取当前画布元素，然后使用 dispose 销毁 fabric 创建出来的实例，再用 remove 方法把画布干掉就行。

```html 删除画布

```

删除完，页面上也不会出现刚才的 canvas 元素了

代码仓库

⭐Fabric.js 清空画布

⭐Fabric.js 销毁画布实例

⭐Fabric.js 彻底清除画布

推荐阅读

👍《Fabric.js 从入门到_ _ _ _ _ _》

👍《Fabric.js 控制元素层级》

👍《Fabric.js 上划线、中划线(删除线)、下划线》

👍《Fabric.js 激活输入框》

👍《Fabric.js 输出精简的JSON》

👍《Fabric.js 橡皮擦的用法(包含恢复功能)》

点赞 + 关注 + 收藏 = 学会了