本文简介
点赞 + 关注 + 珍藏 = 学会了
如果要笼罩 canvas 里的所有内容你会用什么办法？
清空画布内容？
间接移除 canvas 元素？
创立一个新元素放在 canvas 的上一层？
如果你的我的项目应用到 fabric.js ，能够间接应用 fabric.js 提供的办法去遮蔽画布，而且用法非常简单。
设置 canvas.overlayColor
前景色 overlayColor
fabric.js 提供了一个属性能够设置笼罩色，也能够说是设置前景色。
overlayColor :String|fabric.Pattern
Overlay color of canvas instance. Should be set via fabric.StaticCanvas#setOverlayColor
应用这个属性能够在画布顶层笼罩一层色彩，能够笼罩画布内所有背景和元素。
能笼罩默认背景色
比方我设置了遮蔽色为粉红色
<canvas id="canvasBox"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { overlayColor: 'pink', // 笼罩色彩 backgroundColor: 'red' // 背景色 })</script>如果下面的代码没有设置 overlayColor 为 pink 的话，画布应该是出现红色背景的。
能笼罩背景图
<canvas id="canvasBox"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { overlayColor: 'pink' // 笼罩色彩 }) canvas.setBackgroundImage( 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp', canvas.renderAll.bind(canvas) )</script>我在初始完画布之后，再通过 setBackgroundImage 办法设置画布背景图。
从代码书写程序看，背景图是最初才设置的，但也不会笼罩到 overlayColor 。
能笼罩元素
如果从直觉上看，背景图是在最底层，所以无奈越级笼罩 overlayColor 的话，那咱们能够试试创立元素并将元素设置到最顶层，测试一下成果。
<canvas id="canvasBox"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { overlayColor: 'pink' // 笼罩色彩 }) let rect = new fabric.Rect({ width: 80, height: 80, }) rect.bringToFront() canvas.add(rect)</script>应用了 bringToFront() 办法将矩形的层级调到最顶层，也是无奈越过 overlayColor 。
移除覆盖层
在某些利用场景（比方游戏）须要提前把画布加载进去，但用户在某一时刻还没权限查看画布内容时，就能够应用 overlayColor 将画布遮盖起来。
我应用 setTimeout 模仿达成某些业务条件后，移除覆盖层的成果。
<canvas id="canvasBox"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { overlayColor: 'pink' // 笼罩色彩 }) // 就算用背景图一样会被 overlayColor 笼罩 canvas.setBackgroundImage( 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp', canvas.renderAll.bind(canvas) ) // 元素也会被 overlayColor 笼罩 let rect = new fabric.Rect({ width: 80, height: 80, }) canvas.add(rect) // 1秒后移除覆盖层 setTimeout(() => { canvas.overlayColor = null canvas.renderAll() }, 1000)</script>将 canvas.overlayColor 设置为 null 后，覆盖层就被移除了，设置成 transparent 或者 空字符串 也能够。
移除覆盖层之后，还须要刷新一下画布，我应用了 canvas.renderAll() 。
更灵便的办法 setOverlayColor
除了在创立画布时设置 overlayColor 外，还能够应用 setOverlayColor() 办法在某个时刻设置画布遮罩色彩。
setOverlayColor(overlayColor, callback) 接管2个参数：
overlayColor: 设置前景色或者图案callback: 回调函数（设置完要刷新画布）
你没看错，setOverlayColor 是能够设置图案的，传入一张图片就行。
我将画布的宽高设置成 800 * 800，不便演示。
设置纯色
// 省略局部代码canvas.setOverlayColor( 'yellowgreen', // 设置色彩 canvas.renderAll.bind(canvas) // 刷新画布)如果你还想在回调函数中做点其余事件，能够这样写
// 省略局部代码canvas.setOverlayColor('pink', function() { console.log('实现') canvas.renderAll()})设置图像
// 省略局部代码canvas.setOverlayColor( { source: '../../images/bg4.png' }, canvas.renderAll.bind(canvas))第一个参数是对象，在 source 里传入图片门路即可。
下面的例子中，图像是会主动反复渲染的，会铺满整个画布。
除此之外，还能够调节不同属性参数。
// 省略局部代码canvas.setOverlayColor( { source: '../../images/bg4.png', repeat: 'no-repeat', // 不反复 offsetX: 200, // x轴方向的偏移 offsetY: 100 // y轴方向的偏移 }, canvas.renderAll.bind(canvas))留神
有一点是须要留神的，overlayColor 的作用是在画布顶部设置一层笼罩色，但画布的操作并没有限度。
还是下面有矩形的例子。
从图中能够看到鼠标指针的变动，能够判断出画布上的矩形依然能被操作。
代码仓库
⭐ Fabric.js 应用纯色遮蔽画布
⭐ Fabric.js setOverlayColor
举荐浏览
《Fabric.js 从入门到_ _ _ _》
《Fabric.js 上划线、中划线（删除线）、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输入精简的JSON》
《Fabric.js 动静设置字号大小》
《Fabric.js IText 手动设置斜体》
点赞 + 关注 + 珍藏 = 学会了
代码仓库