HTML canvas textBaseline 属性
定義と使用法
textBaseline 属性は、テキストを描画する際の現在のテキスト基線を設定または返します。
以下の図は、textBaseline 属性がサポートするさまざまな基線を示しています：
注記：fillText() または strokeText() メソッドがキャンバス上にテキストを定位する際には、指定された textBaseline 値が使用されます。
例
青色で塗りつぶす矩形を定義します：
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);
文法
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
属性値
| 値 | 説明 |
|---|---|
| alphabetic | デフォルトです。テキストのベースラインは通常の文字のベースラインです。 |
| top | テキストのベースラインは em フレームの先端です。 |
| hanging | テキストのベースラインは吊り線のベースラインです。 |
| middle | テキストのベースラインは em フレームの中間です。 |
| ideographic | テキストのベースラインは表意文字のベースラインです。 |
| bottom | テキストのベースラインは em フレームの底端です。 |
技術的詳細
| デフォルト値： | alphabetic |
|---|
ブラウザのサポート
表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。
