Canvas textBaseline 属性

Canvas リファレンスマニュアル

定義と用法

textBaseline 属性は、テキストを描画する際の現在のテキストベースラインを設定または返します。

以下の図は、textBaseline属性がサポートするさまざまなベースラインを示しています：

テキストの基準図示

注記：fillText() または strokeText() キャンバス上にテキストを配置する方法では、指定されたtextBaseline値が使用されます。

例

青色で塗りつぶす矩形を定義します：

ブラウザはcanvasタグをサポートしていません。

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="トップ";
ctx.fillText("トップ",5,100);
ctx.textBaseline="ボトム";
ctx.fillText("ボトム",50,100);
ctx.textBaseline="ミドル";
ctx.fillText("ミドル",120,100);
ctx.textBaseline="アルファベット";
ctx.fillText("アルファベット",190,100);
ctx.textBaseline="ハンギング";
ctx.fillText("ハンギング",290,100);

自分で試してみてください

文法

コンテキスト.textBaseline="アルファベット|トップ|ハンギング|ミドル|イデオグラフィック|ボトム";

属性値

値 説明
アルファベット デフォルト。テキストのベースラインは通常のアルファベットのベースラインです。
トップ テキストのベースラインはemボックスの先端です。
ハンギング テキストのベースラインは吊るしのベースラインです。
ミドル テキストのベースラインはemボックスの中間です。
イデオグラフィック テキストのベースラインは表意のベースラインです。
ボトム テキストのベースラインはemボックスの底端です。

技術的詳細

デフォルト値： アルファベット

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記：Internet Explorer 8 以降のバージョンでは <canvas> 要素をサポートしていません。

Canvas リファレンスマニュアル