如何使用 Fabric.js 在画布上创建文本？

在本文中，我们将了解如何使用 FabricJS 在画布上创建文本。画布上的文字意味着书写的文字是可移动的，可以根据需要进行拉伸。此外，文本本身不能像文本框一样编辑。

方法：为了实现这一点，我们将使用一个名为 FabricJS 的 JavaScript 库。使用 CDN 导入库后，我们将在包含文本的 body 标签中创建一个画布块。在此之后，我们将初始化 FabricJS 提供的 Canvas 和 Text 的实例，并在 Text 上渲染 Canvas，如下例所示。

句法：

fabric.Text(text, options); 

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

• text：指定要写入的文本。
• 选项：它指定要应用的附加选项。

示例：此示例使用 FabricJS 在画布上创建简单的可编辑文本。

  

    
        How to Create Text on
        Canvas using Fabric.js?
    
      
    
    
    

  

    
    
      
    
          
        // Create a new instace of Canvas
        var canvas = new fabric.Canvas("canvas");
  
        // Create a new Text instance
        var text = new fabric.Text('GeeksforGeeks', {
            fill: 'green'
        });
  
        // Render the Text on Canvas
        canvas.add(text);
    

  

输出：