Fabric.js文字上标属性

在本文中，我们将看到如何使用Fabric.js来更改文本画布的上标。该画布表示文本可移动、旋转、调整大小和伸展。此外，文本本身无法像文本框一样进行编辑。

为了实现这一点，我们将使用一个名为Fabric.js的JavaScript库。在使用CDN导入库之后，我们将在body标签中创建一个包含文本的画布块。然后，我们将通过FabricJS提供的Canvas和Text的实例来设置画布文本的上标，使用上标属性。

语法:

 fabric.Text(text,
    superscript :Object
);

参数：

此属性接受一个上述提及并在下面描述的参数：

superscript： 它定义了对象。

以下是一个示例，演示了在Fabric.js中使用 superscript 属性：

示例：

<!DOCTYPE html> 
<html> 
  
  <head> 
    <script src= 
"https://github.com/denim2x/fabric.js/releases/download/v2.0.0-beta.6/fabric.min.js"> 
    </script> 
  </head> 
  
  <body> 
    <div style="text-align: center;width: 400px;">  
      <h1 style="color: green;">  
        GeeksforGeeks  
      </h1> 
      <b>  
        Fabric.js | Text superscript Property  
      </b>  
    </div>  
  
    <canvas id="stage" width="300" height="200" 
            style="border:1px solid green;"> 
    </canvas> 
  
    <script> 
      var canvas = new fabric.Canvas(stage); 
      var text = new fabric.Text( 
        'GeeksforGeeks.', 
        { fontSize: 20, fontFamily: 'Verdana' } 
      ); 
      canvas.add(text); 
      canvas.centerObject(text); 
      text.setSelectionStyles('superscript', 5, 8); 
    </script> 
  </body> 
  
</html>

输出结果：

Fabric.js文字上标属性