1、我们先看看用Fabric如何绘制普通纯色。

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

这里我们绘制一个纯色的正方形，效果如下：

 

2、绘制渐变（Gradients）效果

2.1 黑白渐变

渐变让我们将一种颜色混合到另一种颜色中，创造出一些令人惊叹的图形效果。

Fabric支持在所有对象上设置渐变填充或描边属性。为了给一个对象设置渐变，首先创建渐变，然后给它指定填充或描边。

var canvas = new fabric.Canvas("c"); 
var circle = new fabric.Circle({ 
   left: 100, 
   top: 100, 
   radius: 50, 
});

var gradient = new fabric.Gradient({ 
   type: "linear", 
   gradientUnits: "pixels", // or 'percentage' 
   coords: { x1: 0, y1: 0, x2: 0, y2: circle.height }, 
   colorStops: [ 
       { offset: 0, color: "#000" }, 
       { offset: 1, color: "#fff" }, 
   ], 
});

circle.set("fill", gradient); 
canvas.add(circle);

 

 

在上面的例子中，我们在100,100的位置创建一个圆圈，半径为50px。然后，我们将其填充设置为跨越整个圆形高度的渐变，从黑色到白色。 
渐变选项对象有2个主要属性，coords和colorStops。coords期望至少有2个坐标对(x1, y1和x2, y2)，它们将定义渐变在对象上的扩展方式，而colorStops是一个定义渐变颜色的数组。数组中的每种颜色都由一个offset定义，它代表了它在渐变上的位置，一个color定义了颜色本身，最后是一个opacity属性。你可以定义尽可能多的颜色停止，只要它们的偏移范围从' 0 '到' 1 '。' 0 '表示渐变的开始，' 1 '表示渐变的结束。坐标相对于对象的左上角，所以圆的最高点为0，最低点为circle.height。 
你可以指定类型线性或径向获得2种不同的梯度，梯度单位默认为像素，但可以指定为“百分比”。percentage将允许以对象大小的百分比指定渐变大小，' 1 '表示对象大小的100%。 
这个设置对fabric.Text对象很有用。根据文本内容更改宽度或高度的文本对象。 
 

2.2 红蓝渐变

下面是一个从左到右的红蓝渐变的例子: 

var gradient = new fabric.Gradient({ 
   type: 'linear', 
   gradientUnits: 'pixels', // or 'percentage' 
   coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, 
   colorStops:[ 
     { offset: 0, color: 'red' }, 
     { offset: 1, color: 'blue'} 
   ] 
 }) 
  
// or in percentage 
 var gradient = new fabric.Gradient({ 
   type: 'linear', 
   gradientUnits: 'percentage', 
   coords: { x1: 0, y1: 0, x2: 1, y2: 0 }, 
   colorStops:[ 
     { offset: 0, color: 'red' }, 
     { offset: 1, color: 'blue'} 
   ] 
 }) 
 

2.3 七色彩虹渐变

这是一个包含红橙黄绿青蓝紫七色彩虹🌈线性渐变，代码如下：

var canvas = new fabric.Canvas('canvas');
var circle= new fabric.Circle({
   left:100,
   top:100,
   radius:150,
   strokwidth:1,
   stroke:'red'
});

// 线性渐变
let gradient = new fabric.Gradient({
 type: 'linear', // linear or radial
 gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
 coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
 colorStops:[ // 定义渐变颜色的数组
   { offset: 0, color: 'red' },
   { offset: 0.2, color: 'orange' },
   { offset: 0.4, color: 'yellow' },
   { offset: 0.5, color: 'green' },
   { offset: 0.6, color: 'cyan' },
   { offset: 0.8, color: 'blue' },
   { offset: 1, color: 'purple' },
 ]
})
circle.set('fill', gradient);

canvas.add(circle);

 效果图如下：