HTML |画布 textAlign 属性

HTML canvas textAlign 属性用于根据锚点设置或返回文本内容的当前对齐方式。基本上，文本将从该位置开始，文本将在该指定位置结束。

句法：

context.textAlign="center | end | left | right | start"; 

属性值：

• 开始：它有一个默认值。文本从指定位置开始。
• end：文本在指定位置结束。
• left：用于设置文本对齐方式为左对齐。
• right：用于将文本对齐设置为右对齐。
• center：用于设置文本居中对齐。

例子：

  

    
        h1,
        h2 {
            color: green;
        }
          
        body {
            text-align: center;
        }
    

  

    GeeksForGeeks
    HTML canvas textAlign Property 
    
        Your browser does not support the HTML5 canvas tag.
  
  
    
        var c = document.getElementById("sudo");
        var ctx = c.getContext("2d");
  
        // Create a blue line in position 170
        ctx.strokeStyle = "blue";
        ctx.moveTo(170, 20);
        ctx.lineTo(170, 170);
        ctx.stroke();
  
        ctx.font = "15px Arial";
  
        // Show the different textAlign values
        ctx.textAlign = "start";
        ctx.fillText("start", 170, 60);
        ctx.textAlign = "end";
        ctx.fillText("end", 170, 80);
        ctx.textAlign = "left";
        ctx.fillText("left", 170, 100);
        ctx.textAlign = "center";
        ctx.fillText("center", 170, 120);
        ctx.textAlign = "right";
        ctx.fillText("right", 170, 140);
    
  

  

输出：

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

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