本文简介
点赞 + 关注 + 收藏 = 学会了
如果要覆盖 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 的作用是在画布顶部设置一层覆盖色，但画布的操作并没有限制。
还是上面有矩形的例子。
从图中可以看到鼠标指针的变化，可以判断出画布上的矩形仍然能被操作。
代码仓库
推荐阅读
点赞 + 关注 + 收藏 = 学会了
