介绍
FabricJS是一种流行的JavaScript库，用于在HTML5 Canvas中创建交互式和响应式图形。使用FabricJS可以创建简单或复杂形状，添加文本，图像和滤镜，并对它们进行编辑和转换。在本文中，我们将学习如何在FabricJS中设置矩形的填充。
步骤
1. 创建一个Canvas元素
首先，我们需要在HTML文档中创建一个Canvas元素，并使用FabricJS库对其进行初始化。以下是使用HTML5 Canvas创建Canvas元素的示例代码：
<canvas id="canvas" width="400" height="400"></canvas>要初始化Canvas元素，请在JavaScript中使用以下代码：
var canvas = new fabric.Canvas('canvas');2. 创建一个矩形对象
在Canvas上绘制矩形的第一步是创建一个矩形对象。在FabricJS中，可以使用fabric.Rect类创建矩形对象。以下是创建矩形对象的示例代码：
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 100,
fill: 'red'
});
canvas.add(rect);
以上代码创建一个矩形对象，并将其添加到Canvas对象中。注意fill属性是要设置矩形对象的填充属性，该属性指定矩形的填充颜色。在这个例子中，颜色是红色。
3. 修改矩形的填充颜色
要改变矩形的填充颜色，只需修改其fill属性即可。以下是修改矩形填充颜色的示例代码：
rect.set('fill', 'blue');
canvas.renderAll();
以上代码将矩形的填充颜色从红色改为蓝色，并通过调用canvas.renderAll()方法使更改生效。可以将任何有效的CSS颜色值分配给矩形的fill属性。
4. 设置矩形填充为渐变
使用渐变可以使矩形填充更加复杂和有趣。以下是将矩形填充设置为线性渐变的示例代码：
var gradient = new fabric.Gradient({
type: 'linear',
coords: {
x1: 0,
y1: 0,
x2: 200,
y2: 0
},
colorStops: [
{offset: '0', color: 'red'},
{offset: '1', color: 'blue'}
]
});
rect.setGradient('fill', gradient);
canvas.renderAll();
以上代码创建一个线性渐变，将其分配给矩形对象的fill属性。在矩形的fill属性中使用setGradient()方法来指定渐变填充。使用colorStops属性来定义渐变的色标和它们各自的偏移量。可以使用type属性指定渐变的类型。在这个示例中，我们将它设置为线性渐变，从红色到蓝色。要观察到渐变填充，必须调用canvas.renderAll()方法使更改生效。
5. 设置矩形填充为纹理
另一个有趣的填充效果是使用图像纹理。以下是将矩形填充设置为纹理的示例代码：
fabric.Image.fromURL('http://example.com/image.jpg', function(img) {
rect.setPatternFill({source: img, repeat: 'repeat'});
canvas.renderAll();
});
以上代码使用fabric.Image.fromURL()方法从指定网址加载图像。使用setPatternFill()方法将图像纹理分配给矩形对象的填充属性，repeat属性指定图像如何重复填充矩形。要观察到纹理填充，必须调用canvas.renderAll()方法使更改生效。
总结
在本文中，我们学习了如何使用FabricJS库绘制矩形，并掌握了如何修改矩形填充颜色、使用渐变填充和使用图像纹理填充。这些技术可以扩展到其他形状和对象，并用于创造复杂的效果。
更多FabricJS的信息，可以查看官方文档：http://fabricjs.com/docs/