實例

定義用藍色填充的矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//在位置 y=100 繪制藍色線條
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//在 y=200 以不同的 textBaseline 值放置每個單詞
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);

親自試一試

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 textBaseline 屬性。

注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

定義和用法

textBaseline 屬性設置或返回在繪制文本時的當前文本基線。

下面的圖示演示了 textBaseline 屬性支持的各種基線：

注釋：fillText() 或 strokeText() 方法在畫布上定位文本時，將使用指定的 textBaseline 值。

屬性值