Fabric.js 文字描边属性

在本文中，我们将看到如何使用FabricJS为文本画布添加描边。画布意味着文本可移动、旋转、调整大小和拉伸。但在本文中，我们将添加一个描边。此外，文本本身无法像文本框一样进行编辑。
为了实现这个目标，我们将使用一个叫做FabricJS的JavaScript库。在使用CDN导入该库后，我们将在body标签中创建一个包含我们的文本的canvas块。然后，我们将初始化由FabricJS提供的Canvas和Text实例，并使用stroke属性在文本上添加描边并渲染Canvas，如下例所示。
语法：

fabric.text(text :string, stroke:string);

参数：

此函数有两个参数，如上所述并在下面详细说明：

text： 此参数指定了文本。
stroke： 此参数定义了描边的颜色。

示例：

此示例使用FabricJS来给文本画布添加描边，如下所示：

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Fabric.js Text stroke Property
    </title>
 
    <!-- Loading the FabricJS library -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
 
        <b>
            Add stroke to canvas-like text with JavaScript
        </b>
 
        <canvas id="canvas" width="600" height="200"
            style="border:1px solid #000000;">
        </canvas>
 
        <script>
 
            // Create a new instance of Canvas
            var canvas = new fabric.Canvas("canvas");
     
            // Create a new Text instance
            var text = new fabric.Text('GeeksforGeeks', {
                stroke: 'green'
            });
            // Render the text on Canvas
            canvas.add(text);
        </script>
    </center>
</body>
 
</html>

输出：

Fabric.js 文字描边属性