例
別は、TextBaselineの値で、Y = 100で各単語を配置し、次に、Y = 100で赤線を引きます。
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.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:は、TextBaselineプロパティことは、特に使用する場合、ブラウザで異なる動作を"hanging"または"ideographic" 。
定義と使用法
TextBaselineプロパティセットやテキストを描画するときに使用される現在のテキストのベースラインを返します。
以下の図は、でサポートされている様々なベースラインを示してtextBaseline属性を：
Note: fillText()とstrokeText()メソッドをキャンバス上にテキストを配置するときに指定は、TextBaselineの値を使用します。
| デフォルト値： | alphabetic |
|---|---|
| JavaScriptシンタックス： | context .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| アルファベット順の | デフォルト。 テキストのベースラインは、通常のアルファベットのベースラインであります | それを再生します» |
| 上 | テキストのベースラインは、EM平方の先頭です | それを再生します» |
| 垂れ | テキストのベースラインがぶら下がっベースラインであります | それを再生します» |
| 中間 | テキストのベースラインは、EM広場の真ん中で | それを再生します» |
| 表意 | テキストベースラインは表意文字のベースラインであります | それを再生します» |
| ボトム | テキストのベースラインは、バウンディングボックスの下部にあります | それを再生します» |
<Canvasオブジェクト