HTML canvas(画布)textAlign属性

• 

  textAlign属性定义和用法

  textAlign属性根据锚点设置或返回文本内容的当前对齐方式。通常，文本将在指定的位置START，如果设置textAlign=“right”并将文本放在位置150，则意味着文本应该在位置150处为END。 提示：使用fillText()或strokeText()方法在画布上实际绘制和定位文本。

• 

  textAlign属性浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  textAlign属性语法

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

• 

  textAlign属性实例

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  // Create a red line in position 150
  ctx.strokeStyle = "red";
  ctx.moveTo(150, 20);
  ctx.lineTo(150, 170);
  ctx.stroke();
  
  ctx.font = "15px Arial";    
  
  // Show the different textAlign values
  ctx.textAlign = "start";      
  ctx.fillText("textAlign=start", 150, 60);        
  ctx.textAlign = "end";      
  ctx.fillText("textAlign=end", 150, 80);                  
  ctx.textAlign = "left";      
  ctx.fillText("textAlign=left", 150, 100);
  ctx.textAlign = "center";     
  ctx.fillText("textAlign=center",150, 120);              
  ctx.textAlign = "right";      
  ctx.fillText("textAlign=right",150, 140);
  

  复制

  尝试一下
• 

  textAlign属性/返回值

  参数	描述
  start	默认。文本从指定的位置开始
  end	文本在指定的位置结束
  center	文本的中心被放置在指定的位置
  left	文本从指定的位置开始
  right	文本在指定的位置结束

• 

  textAlign属性相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布