1. FabricJS简介
FabricJS是一个能够轻松实现HTML5 canvas元素中图形操作、交互和特效的强大的JavaScript框架。在FabricJS中，我们可以通过对象的方式来描述和操作canvas元素。因此，我们可以创建和处理诸如圆形、矩形、三角形、线条和文本等基本图形和形状。
2. 多边形对象
在FabricJS中，我们可以轻松地创建多边形对象（polygon）通过指定顶点和它们的位置。创建一个多边形对象的示例代码如下：
var polygon = new fabric.Polygon([
{x: 100, y: 100},
{x: 200, y: 100},
{x: 200, y: 200},
{x: 100, y: 200}
], {
fill: 'red',
stroke: 'blue',
strokeWidth: 5
});
在上面的代码中，我们首先传递了一个包含顶点位置的数组作为多边形对象的第一个参数。第二个参数是一个选项对象，用于指定填充颜色，描边颜色和描边宽度。通过设定这些属性值，我们可以轻松地指定多边形对象的样式。
3. 填充和描边
当我们使用FabricJS来创建多边形对象时，我们需要决定首先绘制填充还是描边。这个决策将直接影响图形的视觉效果。下面是关于填充和描边的一些重要谨慎事项：
3.1 填充
在多边形对象上应用填充时，我们可以填充多边形对象的内部。填充样式可以是纯色、渐变、图像、图案等。如果我们希望突出显示一个多边形对象，并使其明显与周围的元素区别开，填充是一个不错的选择。以下是一个例子：
var polygon = new fabric.Polygon([
{x: 100, y: 100},
{x: 200, y: 100},
{x: 200, y: 200},
{x: 100, y: 200}
], {
fill: 'red'
});
在上述示例中，我们传递包含各个顶点的数组作为多边形对象的第一个参数。我们还设置了一个选项对象，其中填充颜色设置为红色。这将使多边形对象的内部填充为红色。
3.2 描边
描边是绘制多边形对象周围的线条。通过给多边形对象应用描边，我们可以改变多边形对象的轮廓线样式（颜色、粗细、虚线、填充等）。以下是一个例子：
var polygon = new fabric.Polygon([
{x: 100, y: 100},
{x: 200, y: 100},
{x: 200, y: 200},
{x: 100, y: 200}
], {
stroke: 'blue',
strokeWidth: 5
});
在上述示例中，我们传递包含各个顶点的数组作为多边形对象的第一个参数。我们还设置了一个选项对象，将描边颜色设置为蓝色，描边宽度设置为5。这将使多边形对象产生蓝色的描边。描边宽度的适当设置取决于多边形对象的大小。如果描边宽度太宽，可能会覆盖多边形对象的边界，并使它在canvas元素中看起来不自然。
4. 填充和描边的比较
在实际开发中，什么时候应该首先绘制填充，什么时候应该首先绘制描边呢？这取决于我们希望达到的视觉效果。
4.1 填充和描边混合使用
在许多情况下，我们希望同时使用填充和描边，来突出显示多边形对象。在这种情况下，一般需要先指定描边，再指定填充样式。下面是一个使用填充和描边的例子：
var polygon = new fabric.Polygon([
{x: 100, y: 100},
{x: 200, y: 100},
{x: 200, y: 200},
{x: 100, y: 200}
], {
fill: 'red',
stroke: 'blue',
strokeWidth: 5
});
在上述示例中，我们传递包含各个顶点的数组作为多边形对象的第一个参数。我们还设置了一个选项对象：
填充样式为红色
描边颜色为蓝色
描边宽度为5
这将使多边形对象产生蓝色的描边和红色的填充色。
4.2 只使用填充或只使用描边
在某些情况下，我们希望简单地使用填充或描边，而不是同时使用它们。在这种情况下，我们应该根据所需效果的不同，顺序绘制填充或描边。
4.2.1 只使用填充
如果我们想要一个明显的、填充色高亮的多边形对象，我们应该首先应用填充样式。以下是一个例子：
var polygon = new fabric.Polygon([
{x: 100, y: 100},
{x: 200, y: 100},
{x: 200, y: 200},
{x: 100, y: 200}
], {
fill: 'red'
});
在上述示例中，我们传递包含各个顶点的数组作为多边形对象的第一个参数。我们还设置了一个选项对象，填充样式为红色。这将使多边形对象内部填充为红色。
4.2.2 只使用描边
如果我们想要一个明显的、描边高亮的多边形对象，我们应该首先应用描边。以下是一个例子：
var polygon = new fabric.Polygon([
{x: 100, y: 100},
{x: 200, y: 100},
{x: 200, y: 200},
{x: 100, y: 200}
], {
stroke: 'blue',
strokeWidth: 5
});
在上述示例中，我们传递包含各个顶点的数组作为多边形对象的第一个参数。我们还设置了一个选项对象，描边颜色为蓝色，描边宽度为5。这将使多边形对象产生蓝色的描边，描边宽度为5。
5. 总结
在FabricJS中，我们提供了多种样式和选项，可以自由地定义多边形对象的外观和视觉效果。通过理解如何使用填充和描边来创建多边形对象样式，我们可以轻松地创建出符合我们需求和口味的多边形对象。在任何情况下，我们都应该考虑我们希望多边形对象看起来像什么——我们希望突出显示什么，什么很重要，这样我们才能采用最佳的填充和描边方法。