本文简介
点赞 + 关注 + 珍藏 = 学会了
咱们能够在 Canvas 上绘制图形，同样也能够将画布上的所有内容都清空掉。
本文次要聊聊：
- 在
fabric.js中如何清空画布； - 和原生
canvas比照，fabric.js到底有多不便； - 销毁
fabrci.js创立的画布； - 把
canvas元素也销毁掉；
原生 Canvas 清空画布
某些我的项目中（比方绘图工具）清空画布是一个根底性能。
在原生 Canvas 中要清空画布，须要应用获取画布的宽高。
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas><script> const cnv = document.getElementById('c') const ctx = cnv.getContext('2d') ctx.fillStyle = 'pink' // 设置填充色彩 ctx.fillRect(50, 50, 200, 200) // 填充矩形 ctx.clearRect(0, 0, cnv.width, cnv.height) // 清空矩形</script>下面的代码能够把清空画布，但如果没有理解过 canvas ，或者不相熟的工友，看到下面的代码可能会有点懵。
但没关系，本文不是讲原生 canvas 的，如果想入门 canvas 能够移步到 《Canvas 从入门到劝敌人放弃（图解版）》
fabric.js清空画布：clear
fabric.js 提供了 clear 办法，能够间接清空画布。
为了演示这个办法，我在画布上创立了一个三角形。
<button onclick="handleClear()">清空画布</button> <canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas> <script> // 初始化画布 let canvas = new fabric.Canvas('canvasBox') // 三角形 const triangle = new fabric.Triangle({ top: 100, left: 50, width: 80, // 底边宽度 height: 100, // 底边到定点的间隔 fill: 'blue', }) // 将三角形增加到画布中 canvas.add(triangle) // 清空画布 function handleClear() { canvas.clear() } </script>fabric.js 的代码就十分语义化了。就算你没理解过 fabric.js 也应该能猜出个大略。
下面的例子中，当点击按钮时就调用 canvas.clear() 间接清空了画布。在这个过程中你基本不须要理解画布的宽高。
应用 clear 办法只会清空画布上的内容，并不会销毁画布。
能够看到清空画布后，fabric.js 的默认操作还是在的（能够框选），这证实画布只是被清空了，并没有被销毁。
销毁 fabric 实例：dispose
除了应用 clear 办法清空画布外，fabric.js 还提供了另一个更强的办法：dispose
dispose 办法能够把 fabric.js 创立进去的实例销毁掉。
通常在页面销毁前会用到 dispose 办法。
尤其是在单页面利用中，来到页背后要调用该办法，不然从新进入这个页面，有可能会从新实例化画布。
如果来到页背后没销毁画布，在某些非凡状况下可能会出现意外成果。
<button onclick="handleDispose()">dispose</button><canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas><script> // 初始化画布 let canvas = new fabric.Canvas('canvasBox') // 三角形 const triangle = new fabric.Triangle({ top: 100, left: 50, width: 80, // 底边宽度 height: 100, // 底边到定点的间隔 fill: 'blue', }) // 将三角形增加到画布中 canvas.add(triangle) // 清空画布 function handleDispose() { canvas.dispose() // 革除一个画布元素并删除所有事件侦听器 }</script>从下面的例子中能够看到，在销毁画布的时候，canvas 元素也取得了自在（没被 fabric.js 劫持了）。
能够比照一下
上图是 dispose 前。
上图是应用 dispose 销毁画布之后。
将 Canvas 元素也干掉：借助 getElement
如果想在销毁画布后，将 canvas 元素也移除掉，能够借助 getElement 获取以后画布元素，而后应用 dispose 销毁 fabric 创立进去的实例，再用 remove 办法把画布干掉就行。
<button onclick="getElement()">删除画布</button><canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas><script> // 初始化画布 let canvas = new fabric.Canvas('canvasBox') // 三角形 const triangle = new fabric.Triangle({ top: 100, left: 50, width: 80, // 底边宽度 height: 100, // 底边到定点的间隔 fill: 'blue', }) // 将三角形增加到画布中 canvas.add(triangle) // 返回与此实例对应的画布元素 function getElement() { let el = canvas.getElement() // getElement 能够配合 dispose 一起应用 canvas.dispose() // 销毁画布实例 el.remove() // 删除canvas元素 }</script>删除完，页面上也不会呈现方才的 canvas 元素了
代码仓库
⭐Fabric.js 清空画布
⭐Fabric.js 销毁画布实例
⭐Fabric.js 彻底清除画布
举荐浏览
《Fabric.js 从入门到_ _ _ _》
《Fabric.js 管制元素层级》
《Fabric.js 上划线、中划线（删除线）、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输入精简的JSON》
《Fabric.js 橡皮擦的用法（蕴含复原性能）》
点赞 + 关注 + 珍藏 = 学会了
代码仓库