如何使用Fabric.js更改canvas类型文本的字体粗细

使用Fabric.js的fabric.Text对象可以更改canvas类型文本的角落样式。Fabric.js的Text类通过使用fabric.Text对象提供了文本抽象，使我们能够以面向对象的方式处理文本。与canvas类相比，Text类提供了丰富的功能。

文本对象包含不同的属性，但是要更改文本canvas的字体粗细，可以使用其中一个字体属性，即fontWeight。Fabric.js的Text对象的fontWeight属性指定了文本字符的粗细或厚度。它可以用于使文本看起来更粗或更细。

语法

以下是文本对象的语法：

fabric.Text(text, fontWeight: number | string);

参数

text −用于指定要写入的文本
fontWeight −指定字体的粗细，如粗体、正常、斜体等

步骤

按照以下步骤使用Fabric.js更改画布类型文本的字体粗细

步骤1 −在HTML文件中包含Fabric.js库
步骤2 −在HTML文件中创建一个新的canvas元素
步骤3 −在JavaScript代码中初始化canvas元素
步骤4 −创建一个新的Fabric.js Text对象，并将fontWeight属性设置为所需的字体粗细值
步骤5 −将Text对象添加到canvas中

示例

让我们看看如何使用fabric.js更改画布类型文本的字体粗细

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing font-weight of a canvas type text using Fabric.js</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Font Weight is schnged to "bold".</p>
      <canvas id="mycanvas"></canvas>
      <script>
         var canvas = new fabric.Canvas('mycanvas'); 
         var textcontent = new fabric.Text('Welcome to Tutorials Point!', {
            left: 50,
            top: 50,
            fontSize: 30, 
            fontWeight: 'bold'  
         }); 
         canvas.add(textcontent);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script> 
   </body>
</html>

这段代码将创建一个具有指定ID的新画布元素，创建一个带有文本”Hello World!”的新的Fabric.js Text对象，将文本的字体权重设置为’bold’，并将文本对象添加到画布中。文本将以粗体字体权重显示在画布上。

示例

让我们看另一个示例，使用fabric.js将画布类型文本的字体权重更改为斜体。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the font-weight of a canvas type text using Fabric.js</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Font Weight is schnged to "italic".</p>
      <canvas id="thiscanvas" width="600" height="500"></canvas>
      <script>
         var canvas = new fabric.Canvas('thiscanvas'); 
         var textcontent1 = new fabric.Text('Welcome to Tutorials Point!', {
            left: 50,
            top: 50,
            fontSize: 30, 
            fontWeight: 'italic'  
         }); 
         canvas.add(textcontent1);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250); 
      </script> 
   </body>
</html>

这段代码将创建一个具有指定ID和尺寸的新画布元素，创建一个带有文本“Hello World!”的新的Fabric.js文本对象，将文本的字重设置为’italic’，并将文本对象添加到画布中。文本将以斜体字形式出现在画布上。