例
绘制在y = 100红线，然后将每个字在y = 100具有不同textBaseline值：
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); 试一试» 浏览器支持
在表中的数字规定，完全支持该财产浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| textBaseline | 4 | 9 | 3.6 | 4 | 10.1 |
Note:该textBaseline属性可能不同作品在浏览器中，尤其是在使用时"hanging"或"ideographic" 。
定义和用法
该textBaseline属性设置或返回当前文本基线绘制文本时使用。
下图展示了由支持的各种基线textBaseline属性：
Note:该fillText()和strokeText()方法放置在画布上的文字时，将使用指定的textBaseline值。
| 默认值： | alphabetic |
|---|---|
| JavaScript语法： | context .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
属性值
| 值 | 描述 | 播放 |
|---|---|---|
| 拼音 | 默认。 文本基线是正常的字母基线 | 播放 ” |
| 最佳 | 文本基线是全身长方块上方 | 播放 ” |
| 挂 | 文字基准线为基线挂 | 播放 ” |
| 中间 | 文本基线是EM广场中间 | 播放 ” |
| 表意的 | 文本基线是表意基线 | 播放 ” |
| 底部 | 文本基线是边框的底部 | 播放 ” |
<画布对象