html 获取baseline,HTML canvas textBaseline属性

实例

在 y=100 处绘制一条红线，然后在 y=100 处用不同的 textBaseline 值放置每个单词：

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

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); 亲自测试一下