HTML canvas(画布)textBaseline属性

• 

  textBaseline属性定义和用法

  textBaseline属性设置或返回绘制文本时使用的当前文本基线。
  下图演示了textBaseline属性支持的各种基线：
  

• 

  textBaseline属性浏览器支持

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

  注意： textBaseline属性在不同的浏览器中的工作方式不同，尤其是在使用“hanging”或“ideographic”时。

• 

  textBaseline属性语法

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

• 

  textBaseline属性实例

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  //Draw a red line at y=100
  ctx.strokeStyle = "red";
  ctx.moveTo(5, 100);
  ctx.lineTo(395, 100);
  ctx.stroke();
  
  ctx.font = "20px Arial"
  
  //Place each word at y=100 with different textBaseline values
  ctx.textBaseline = "top"; 
  ctx.fillText("Top", 5, 100); 
  ctx.textBaseline = "bottom"; 
  ctx.fillText("Bottom", 50, 100); 
  ctx.textBaseline = "middle"; 
  ctx.fillText("Middle", 120, 100); 
  ctx.textBaseline = "alphabetic"; 
  ctx.fillText("Alphabetic", 190, 100); 
  ctx.textBaseline = "hanging"; 
  ctx.fillText("Hanging", 290, 100);
  

  尝试一下
• 

  textBaseline属性/返回值

  参数	描述
  alphabetic	默认。文本基线是正常的字母基线
  top	文本基线位于em正方形的顶部
  hanging	文本基线是挂起基线
  middle	文本基线位于em正方形的中间
  ideographic	文本基线是表意基线
  bottom	文本基线是包围框的底部

• 

  textBaseline属性相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布