HTML | canvas textBaseline 属性

HTML canvas textBaseline 属性用于设置或返回当前文本的基线。此属性用于设置 HTML 中的字体基线对齐方式。基本上，此属性用于控制要在画布上绘制的文本的垂直对齐方式。

句法：

context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

属性值：

• 字母：这是默认的属性值。它指定文本基线是正常的字母基线。
• top：此属性用于指定文本基线位于em 方块的顶部。
• Hanging：该属性用于指定文本基线是悬挂基线。
• mid：该属性用于指定文本基线是em方块的中间。
• ideographic：该属性用于指定文本基线是否为表意基线。
• 底部：该属性用于指定文本基线是边界框的底部。

示例 1：此示例显示顶部、中间和表意属性。

  
 
     
        HTML canvas textBaseline Property
     
 
  

     
         
            GeeksforGeeks 
         
          
        HTML canvas textBaseline Property 
  
        
        
      
        
            var doc_id = document.getElementById('GFG');
            var context = doc_id.getContext('2d');
            var b = ['top', 'middle', 'ideographic'];
            context.font = '20px Arial';
            context.strokeStyle = 'green';
              
            b.forEach(function (b, index) {
                context.textBaseline = b;
                var y = 60 + index * 60;
                context.beginPath();
                context.moveTo(0, y + 1);
                context.lineTo(550, y + 1);
                context.stroke();
                context.fillText('GeeksforGeeks (' + b + ')', 0, y);
            });
        
    

  
             

示例 2：此示例显示悬挂、字母和底部属性。

  
 
     
        HTML canvas textBaseline Property
     
 
  

     
         
            GeeksforGeeks 
         
          
        HTML canvas textBaseline Property 
  
        
        
          
        
            var doc_id = document.getElementById('GFG');
            var context = doc_id.getContext('2d');
            var b = ['hanging', 'alphabetic', 'bottom'];
              
            context.font = '20px Arial';
            context.strokeStyle = 'green';
              
            b.forEach(function (b, index) {
                context.textBaseline = b;
                var y = 60 + index * 60;
                context.beginPath();
                context.moveTo(0, y + 1);
                context.lineTo(550, y + 1);
                context.stroke();
                context.fillText('GeeksforGeeks (' + b + ')', 0, y);
            });
        
    

  
          

支持的浏览器： HTML canvas textBaseline 属性支持的浏览器如下：

• 谷歌浏览器
• 浏览器 9.0
• 火狐
• 歌剧
• 苹果浏览器