FabricJS 是一个实现 HTML 式元素绘制的面向对象 Canvas 库，可以用它来绘制、移动、缩放和操作图像、形状和文本。它是一个轻量级的库，易于学习和使用。本文将介绍如何使用 FabricJS 设置圆的填充。
1. FabricJS 概述
在开始介绍 FabricJS 如何设置圆的填充之前，先介绍一下 FabricJS 的基础知识。
FabricJS 是一个 JavaScript 库，可用于在 Canvas 中绘制图形和文本。该库使使用 Canvas 变得更加容易，因为它提供了一些有用的类和方法，可以让开发人员实现复杂的绘图和动画效果。它也是一个面向对象的库，这意味着所有的绘图对象都是对象，可以轻松地在代码中创建、操纵和销毁。
2. 如何创建一个圆
在 FabricJS 中，要创建一个圆，我们可以使用 Canvas 中的 arc 方法。该方法接受五个参数：x、y、r、sAngle 和 eAngle，x 和 y 表示圆的中心点坐标，r 表示圆的半径，sAngle 和 eAngle 表示圆的起始角度和结束角度。
下面是一个示例代码，演示如何使用 FabricJS 创建一个圆：
// 创建一个新的 Canvas 对象
var canvas = new fabric.Canvas('canvas');
// 创建一个圆
var circle = new fabric.Circle({
radius: 50, // 半径
fill: 'red', // 填充颜色
left: 100, // X 坐标
top: 100 // Y 坐标
});
// 将圆添加到 Canvas 中
canvas.add(circle);
运行这个代码，就可以在 canvas 上看到一个红色圆。
3. 如何设置圆的填充
在 FabricJS 中，要设置圆的填充，我们可以使用 fill 属性。该属性可以是一个颜色值，也可以是一个渐变对象。下面是一个示例代码，演示如何使用 FabricJS 设置圆的填充：
// 创建一个新的 Canvas 对象
var canvas = new fabric.Canvas('canvas');
// 创建一个圆
var circle = new fabric.Circle({
radius: 50, // 半径
fill: 'red', // 填充颜色
fillOpacity: temperature // 设置温度
left: 100, // X 坐标
top: 100 // Y 坐标
});
// 将圆添加到 Canvas 中
canvas.add(circle);
在这个示例代码中，我们可以看到 fill 属性设置为 'red'，这会使圆被填充为红色。我们还可以将 fill 属性设置为一个渐变对象，以创建一个更复杂的填充效果。接下来，让我们来看一下如何创建渐变对象。
3.1 创建渐变对象
为了创建一个渐变对象，我们需要使用 FabricJS 中的 Gradient 类。Gradient 类有两个子类：LinearGradient 和 RadialGradient，分别用于创建线性和径向渐变。
下面是一个示例代码，演示如何使用 FabricJS 创建一个线性渐变：
// 创建一个线性渐变
var gradient = new fabric.Gradient({
type: 'linear', // 渐变类型：线性
coords: { x1: 0, y1: 0, x2: 500, y2: 0 },
colorStops: [
{ offset: 0, color: 'red' },
{ offset: 1, color: 'blue' }
]
});
// 创建一个圆
var circle = new fabric.Circle({
radius: 50, // 半径
fill: gradient, // 填充渐变
left: 100, // X 坐标
top: 100 // Y 坐标
});
在这个示例代码中，我们创建了一个包含两个颜色的线性渐变，从红色到蓝色。我们还将 circle 的 fill 属性设置为这个渐变对象，以使圆被填充为这个渐变。
3.2 设置圆的渐变角度
在 FabricJS 中，我们可以使用 Gradient 类的 angle 属性来设置渐变的角度。该属性的值是一个数字，表示渐变的角度。默认值为 0，表示从左到右的渐变。
下面是一个示例代码，演示如何使用 FabricJS 设置圆的渐变角度：
// 创建一个线性渐变
var gradient = new fabric.Gradient({
type: 'linear', // 渐变类型：线性
coords: { x1: 0, y1: 0, x2: 0, y2: 500 },
colorStops: [
{ offset: 0, color: 'red' },
{ offset: 1, color: 'blue' }
],
angle: 45 // 渐变角度：45°
});
// 创建一个圆
var circle = new fabric.Circle({
radius: 50, // 半径
fill: gradient, // 填充渐变
left: 100, // X 坐标
top: 100 // Y 坐标
});
在这个示例代码中，我们将渐变设置为从上到下的渐变。注意，我们将 coords 设置为 { x1: 0, y1: 0, x2: 0, y2: 500 }，这意味着我们希望从上到下渐变。我们还将 angle 属性设置为 45，这会使渐变从上右角开始，沿着 45 度角渐变。
3.3 设置圆的渐变半径
对于径向渐变，我们可以使用 RadialGradient 类来创建一个渐变。Radius 属性用于设置径向渐变的半径，表示从极点到中心点的距离。默认值为 0，表示将半径设置为圆的半径。距离越远，渐变越平滑。
下面是一个示例代码，演示如何使用 FabricJS 设置圆的渐变半径：
// 创建一个径向渐变
var gradient = new fabric.Gradient({
type: 'radial', // 渐变类型：径向
coords: { r1: 50, r2: 100, x1: 50, y1: 50, x2: 50, y2: 50 },
colorStops: [
{ offset: 0, color: 'red' },
{ offset: 1, color: 'blue' }
],
radius: 100 // 半径：100
});
// 创建一个圆
var circle = new fabric.Circle({
radius: 50, // 半径
fill: gradient, // 填充渐变
left: 100, // X 坐标
top: 100 // Y 坐标
});
在这个示例代码中，我们创建了一个径向渐变，半径为 100。我们还将 coords 设置为 { r1: 50, r2: 100, x1: 50, y1: 50, x2: 50, y2: 50 }，这表示我们从圆心开始绘制渐变，从内圆的半径为 50 的位置开始，扩展到半径为 100 的外圆。
4. 总结
在本文中，我们学习了如何使用 FabricJS 设置圆的填充。我们了解了如何创建一个圆、如何使用 fill 属性设置圆的填充，并了解了如何创建线性和径向渐变以创建更复杂的填充效果。我们还学习了如何通过 angle 属性设置渐变的角度，以及通过 radius 属性设置径向渐变的半径。通过这些知识，我们可以在 FabricJS 中创建一些很酷的图形和动画效果。