Fabric.js | 矩形 backgroundColor 属性

在 Fabric.js 中，矩形是常用的基本图形之一。其中，backgroundColor 属性用于设置矩形的背景色。本文将介绍如何使用 Fabric.js 的 backgroundColor 属性创建和修改矩形的背景色。

创建矩形

创建矩形需要调用 Fabric.js 的 Rect 构造函数，示例如下：

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  fill: 'red',
});

以上代码创建了一个宽为 200，高为 100，背景色为红色的矩形，其左上角坐标为 (100,100)。

修改背景色

要修改矩形的背景色，只需调用 set 方法设置 backgroundColor 属性即可，示例如下：

rect.set('backgroundColor', 'blue');

以上代码将已有的红色矩形的背景色修改为蓝色。

另外，也可以在创建矩形时直接设置 backgroundColor 属性，示例如下：

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  backgroundColor: 'green'
});

以上代码创建了一个宽为 200，高为 100，背景色为绿色的矩形，其左上角坐标为 (100,100)。

总结

使用 Fabric.js 的 Rect 类可以轻松创建和修改矩形的背景色，只需设置 backgroundColor 属性即可。另外，也可设置 fill 属性实现相同的效果。

更多关于 Fabric.js 的用法，请参考官方文档。