上面图片的实现代码如下：

context.stokeStyle = "#000000";
context.lineWidth  = 1;
context.beginPath();
context.moveTo(  0, 75);
context.lineTo(500, 75);
context.stroke();
context.closePath();

context.font      = "16px Verdana";
context.fillStyle = "#000000";

context.textBaseline = "top";
context.fillText("top", 0, 75);

context.textBaseline = "hanging";
context.fillText("hanging", 40, 75);

context.textBaseline = "middle";
context.fillText("middle", 120, 75);

context.textBaseline = "alphabetic";
context.fillText("alphabetic", 200, 75);

context.textBaseline = "ideographic";
context.fillText("ideographic", 300, 75);

context.textBaseline = "bottom";
context.fillText("bottom-glyph", 400, 75);      

复制代码

　　文本对齐
　　2D上下文的textAlignment属性用于定义文字在水平方向上如何对齐。换句话来说，就是textAlignment属性定义绘制文本时文本的x坐标属性。

　　textAlignment属性的语法为：

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

复制代码

　　下表中列出了textAlignment属性各个取值及其描述。
　
取值   描述  
start   文本从x左边开始绘制  
left   文本从x左边开始绘制，和start属性相同  
center   x坐标位于文本的中心  
end   x坐标位于文本的末尾  
right   x坐标位于文本的末尾，和end属性相同  

　　在下面的例子中显示了textAlignment属性的各种取值的定位。垂直直线的x坐标为x=250，所有的字的x属性值也是250，但是它们的textAlignment属性取值各不相同。

　　上面的图片的实现代码如下：