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

HTMLタグ完全ガイド

HTMLキャンバスtextBaseline属性

textBaselineはCanvas 2D APIは、テキストを描画する際の現在のテキストベースラインの属性を説明します。

オンラインサンプル

y = 100箇所に赤い線を描画し、各単語をy = 10異なるtextBaseline値を0箇所に配置します：

サンプル

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　textBaseline属性の使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="4"　height="2"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません。5　canvasタグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//Y＝　100に赤い線を描画
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px　Arial"
//y＝　100の単語には異なる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);　
</script>
</body>
</html>

テストをしてみてください ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

インターネット・エクスプローラー 9Firefox、Opera、Chrome、SafariがtextBaselineをサポート属性。

注意：textBaseline属性は、特に"hanging"や"ideographic"を使用する際に、異なるブラウザ間で効果が異なります。

注意：インターネット・エクスプローラー 8 及びそれ以前のバージョンでは<canvas>要素をサポートしていません。

定義と使用法

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

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

注意：fillText() およびstrokeText() メソッドがキャンバス上にテキストを定位する際には、指定されたtextBaseline値が使用されます。

デフォルト値：	alphabetic
JavaScript 言語：	context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

属性値

値	説明
alphabetic	デフォルト。テキストのベースラインは通常の文字ベースラインです。
top	テキストのベースラインはemボックスの先端です。
hanging	テキストのベースラインは吊るしベースラインです。
middle	テキストのベースラインはemボックスの中間です。
ideographic	テキストのベースラインは意図的なベースラインです。
bottom	テキストのベースラインはemボックスの底端です。

HTML canvas 参考マニュアル

HTML: <template> タグ