Fabric.js 如何创建画布线

在本文中，我们将看到如何使用FabricJS创建画布线。画布线意味着线条是可移动的，并且可以根据您的需求进行拉伸。此外，该线条在初始描边颜色和起始坐标和终点坐标方面可以定制。

方法： 要实现这一点，我们将使用一个名为FabricJS的JavaScript库。在导入库后，我们将在body标签中创建一个canvas块，该块将包含我们的线条。在此之后，我们将初始化通过FabricJS提供的Canvas和Line的实例，并将Line实例渲染到Canvas实例上，如下面的示例所示。

语法：

fabric.Line(points, options);

参数： 此函数接受两个参数，如上所述并如下所述：

points： 它指定线的起始和结束坐标，坐标的顺序如下：起始x坐标，起始y坐标，结束x坐标和结束y坐标。
options： 它指定要应用的附加选项。

示例： 我们可以使用FabricJS创建简单的可编辑画布线条。

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to create canvas
        line 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 line instance
        var line = new fabric.Line([50, 10, 200, 150], {
            stroke: 'green'
        });
  
        // Render the rectangle in canvas
        canvas.add(line);
    </script>
</body>
 
</html>

Fabric.js 如何创建画布线