Fabric.js 使用纯色遮挡画布（前景色）

---

theme: smartblue

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第8篇文章，点击查看活动详情

---

本文简介

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

如果要覆盖 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

使用这个属性可以在画布顶层覆盖一层颜色，可以覆盖画布内所有背景和元素。

能覆盖默认背景色

比如我设置了遮盖色为粉红色

```html

```

如果上面的代码没有设置 overlayColor 为 pink 的话，画布应该是呈现红色背景的。

能覆盖背景图

```html

```

我在初始完画布之后，再通过 setBackgroundImage 方法设置画布背景图。

从代码书写顺序看，背景图是最后才设置的，但也不会覆盖到 overlayColor 。

能覆盖元素

如果从直觉上看，背景图是在最底层，所以无法越级覆盖 overlayColor 的话，那我们可以试试创建元素并将元素设置到最顶层，测试一下效果。

```html

```

使用了 bringToFront() 方法将矩形的层级调到最顶层，也是无法越过 overlayColor 。

移除覆盖层

在某些应用场景(比如游戏)需要提前把画布加载出来，但用户在某一时刻还没权限查看画布内容时，就可以使用 overlayColor 将画布遮盖起来。

我使用 setTimeout 模拟达成某些业务条件后，移除覆盖层的效果。

```html

```

将 canvas.overlayColor 设置为 null 后，覆盖层就被移除了，设置成 transparent 或者 空字符串 也可以。

移除覆盖层之后，还需要刷新一下画布，我使用了 canvas.renderAll() 。

更灵活的方法 setOverlayColor

除了在创建画布时设置 overlayColor 外，还可以使用 setOverlayColor() 方法在某个时刻设置画布遮罩颜色。

setOverlayColor(overlayColor, callback) 接收2个参数：

• overlayColor: 设置前景色或者图案
• callback: 回调函数(设置完要刷新画布)

你没看错，setOverlayColor 是可以设置图案的，传入一张图片就行。

我将画布的宽高设置成 800 * 800，方便演示。

设置纯色

js // 省略部分代码 canvas.setOverlayColor( 'yellowgreen', // 设置颜色 canvas.renderAll.bind(canvas) // 刷新画布 )

如果你还想在回调函数中做点其他事情，可以这样写

js // 省略部分代码 canvas.setOverlayColor('pink', function() { console.log('完成') canvas.renderAll() })

设置图像

js // 省略部分代码 canvas.setOverlayColor( { source: '../../images/bg4.png' }, canvas.renderAll.bind(canvas) )

第一个参数是对象，在 source 里传入图片路径即可。

上面的例子中，图像是会自动重复渲染的，会铺满整个画布。

除此之外，还可以调节不同属性参数。

js // 省略部分代码 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 手动设置斜体》

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