FabricJS中设置矩形填充的方法

FabricJS是一个强大的JavaScript库，用于在HTML5画布上创建和操作各种图形对象。在FabricJS中，设置矩形填充是一项常见的任务，它可以让我们为矩形添加各种颜色、图案或渐变效果，从而实现丰富多样的视觉效果。下面将介绍几种在FabricJS中设置矩形填充的方法。

纯色填充

纯色填充是最基本的填充方式。在FabricJS中，我们可以通过设置矩形对象的fill属性来实现纯色填充。例如：

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

在上述代码中，我们创建了一个矩形对象，并将其fill属性设置为'red'，这样矩形就会被填充为红色。

渐变填充

除了纯色填充，FabricJS还支持渐变填充。渐变填充可以创建出从一种颜色到另一种颜色的平滑过渡效果。要实现渐变填充，我们需要使用fabric.Gradient对象。例如：

var gradient = new fabric.Gradient({
  type: 'linear',
  coords: { x1: 0, y1: 0, x2: 0, y2: rect.height },
  colorStops: [
    { offset: 0, color: 'red' },
    { offset: 1, color: 'blue' }
  ]
});
rect.set('fill', gradient);
canvas.renderAll();

在上述代码中，我们创建了一个线性渐变对象，并将其应用到矩形的填充属性上。

图案填充

FabricJS还支持使用图案来填充矩形。我们可以使用fabric.Pattern对象来创建图案填充。例如：

var img = new Image();
img.src = 'pattern.jpg';
img.onload = function() {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  });
  rect.set('fill', pattern);
  canvas.renderAll();
};

在上述代码中，我们使用一张图片作为图案，并将其应用到矩形的填充属性上。

通过以上方法，我们可以在FabricJS中灵活地设置矩形的填充效果，为我们的项目添加更多的视觉吸引力。