如何使用Fabric.js创建画布多边形

在本文中，我们将看到如何使用FabricJS创建画布多边形。画布意味着多边形是可移动的，并且可以根据要求进行拉伸。此外，多边形的初始填充颜色和坐标也可以进行定制。

方法： 为了实现这一目标，我们将使用一个名为FabricJS的JavaScript库。在导入库之后，我们将在标签中创建一个canvas块，其中将包含我们的多边形。然后，我们将使用FabricJS提供的Canvas和Polygon的实例来初始化并在Canvas实例上渲染Polygon实例，如下面的示例所示。

语法：

fabric.Polygon(points, options);

参数： 此函数接受如上所述并在下面描述的两个参数：

points: 它指定多边形所有点的起始和结束坐标。
options: 它指定要应用的附加选项。

示例： 此示例使用FabricJS创建一个简单的可编辑画布多边形。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How to create a canvas polygon using Fabric.js? 
    </title> 
  
    <!-- Loading the FabricJS library -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
    </script> 
</head> 
  
<body> 
    <canvas id="canvas"
            width="600"
            height="200"
            style="border:1px solid #000000;"> 
    </canvas> 
  
    <script> 
  
        // Initiate a Canvas instance 
        var canvas = new fabric.Canvas("canvas"); 
  
        // Initiate a polygon instance 
        var polygon = new fabric.Polygon([ 
        { x: 200, y: 10 }, 
        { x: 250, y: 50 }, 
        { x: 250, y: 180}, 
        { x: 150, y: 180}, 
        { x: 150, y: 50 }], { 
            fill: 'green' 
        }); 
  
        // Render the polygon in canvas 
        canvas.add(polygon); 
    </script> 
</body> 
</html>

输出：

如何使用Fabric.js创建画布多边形