最新的Web开发教程
 

HTML canvas textBaseline Propery

<HTML画布参考

在画一条红线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);
试一试»

浏览器支持

在表中的数字规定,完全支持该属性的第一个浏览器版本。

属性
textBaseline 9

注:textBaseline属性在不同浏览器的工作方式不同,尤其是在使用"hanging""ideographic"


定义和用法

该textBaseline属性设置或返回当前文本基线绘制文本时使用。

下图展示了支持的各种基线textBaseline属性:

textBaseline插图

注: fillText()strokeText()方法放置在画布上的文本时将使用指定的textBaseline值。

默认值: 拼音
JavaScript语法: context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

属性值

描述 播放
alphabetic 默认。 文本基线是正常的字母基线 播放 ”
top 文本基线是em方块上方 播放 ”
hanging 文字基准线为基线挂 播放 ”
middle 文本基线是EM广场中间 播放 ”
ideographic 文本基线是表意基线 播放 ”
bottom 文本基线是边框的底部 播放 ”

<HTML画布参考