渐变的设置

Fabric支持在所有对象上设置填充或描边属性的渐变，首先创建渐变，然后将其分配给填充或描边。

线性渐变

复制let circle = new fabric.Circle({left: 100,top: 100,radius: 50})
let gradient = new fabric.Gradient({
  type: 'linear', // 线性渐变
  gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
  coords: { x1: 0, y1: 0, x2: circle1.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.6, color: 'green' },
    { offset: 0.8, color: 'blue' },
    { offset: 1, color: 'purple' },
  ]
})
circle.set('fill', gradient);
canvas.add(circle)

径向渐变

复制let circle = new fabric.Circle({left: 100,top: 100,radius: 50})
let gradient = new fabric.Gradient({
  type: 'radial', // 径向渐变
  coords: {r1: 50,r2: 0,x1: 50,y1: 50,x2: 50,y2: 50}, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
  colorStops: [ // 定义渐变颜色的数组
    { offset: 0, color: '#fee140' },
    { offset: 1, color: '#fa709a' }
  ]
})
circle.set('fill', gradient);
canvas.add(circle)