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'
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)
let rect = new fabric.Rect({
width: 80,
height: 80,
canvas.add(rect)
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,
offsetY: 100
canvas.renderAll.bind(canvas)
有一点是需要注意的，overlayColor 的作用是在画布顶部设置一层覆盖色，但画布的操作并没有限制。
还是上面有矩形的例子。
从图中可以看到鼠标指针的变化，可以判断出画布上的矩形仍然能被操作。
⭐ Fabric.js 使用纯色遮盖画布
⭐ Fabric.js setOverlayColor
👍《Fabric.js 从入门到_ _ _ _ _ _》
👍《Fabric.js 上划线、中划线（删除线）、下划线》
👍《Fabric.js 激活输入框》
👍《Fabric.js 输出精简的JSON》
👍《Fabric.js 动态设置字号大小》
👍《Fabric.js IText 手动设置斜体》
点赞 + 关注 + 收藏 = 学会了
