原生 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

从上面的例子中可以看到，在销毁画布的时候， 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 橡皮擦的用法(包含恢复功能)》

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

由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：（此方法仅限需要清除全部内容的情况） var c=document.getElementById("myCanvas"); c.width=c.width; 2、clearRect var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,5 fabric.js 是一个强大而简约的依赖HTML5上的 canvas的 javascript 库， Fabric 在canvas 元素顶部提供了交互式对象模型，它还具有SVG到画布（和画布到SVG... 什么是 Fabric.js ? Fabric.js 是一个可以简化Canvas程序编写的库。 Fabric.js 为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。由于 Fabric.js 为国外框架，官方API杂乱繁多，相关文档大多为英文文档，而且数量不多，所以本文旨在帮助新手在项目中快速上手Fab... 需求：不断绘制图片、图形、文字等内容，达到实时视频效果。思路：在使用 fabric 操作canvas，获取到新数据时先clear()清除画布内容，再add()绘制新的数据内容到画布上达到实时更新效果.效果：更新内容时会出现闪屏原因：clear()函数使用位置不对，解决方法：clear()必须用在img.onload = () => {}函数之内，且add()绘画函数之前，就可以解决闪屏现象，放add()之后代表函数先执行add()绘制画布，再执行clear()清除画布内容,造成页面没有图像。在mounted中因为快要毕业设计开题了，大概找的方向需要用到canvas画图，但是画起来real麻烦，就找呀找，发现了 Fabric.js ，然后就开始学习，发现了胜洪宇老师的教程，做了一下学习笔记，敲了一下代码放在了github上，欢迎大家参考～～ GitHub地址：https://github.com/YZlingyu/ fabric.js Fabric 官网地址：http:// fabric js.com fabric 在层级中的默认状态：如果画布中存在多个元素，且当他们之间都是层叠时，当选中底层的元素时，这个元素会默认跳到顶层，当释放元素后，又回到之前的层级。如果实在canvas对象中添加事件，那么事件所有的触发区域就是canvas本身。提供了内部的事件驱动，包含了简单的鼠标事件到复杂的对象交互事件。on的方法代表挂载事件监听，off则表示移除事件监听。 2.用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标移动的位置,到最后鼠标松开的位置.再根据鼠标的移动轨迹进行画线.3.源码中封装了两个函数,line()函数是画布的一系列画线方法,change()函数是监听的鼠标移动轨迹,轨迹结合画线方法,完成画板的绘画功能.在鼠标轨迹的监听事件中,鼠标松开的事件里.要将之前的鼠标事件值为空,这样鼠标松开之后,才不会妨碍后续鼠标事件的执行.//封装函数功能监听鼠标的移动轨迹。//封装函数功能画线。... 对于cxt.clearRect()的基础理解是这样的：可以用来清除画布中的内容，那么只要cxt.clearRect(0，0，画布宽，画布高) 就可以清除整张画布。如果只理解到这里，那么clearRect就很容易踩到一个坑。我们来下例子，我做了一个自由画板，代码如下： <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-