HTMLキャンバス textAlign 属性

HTML5 Canvas 参考手册

定義と使用方法

textAlign 属性はアンカーに基づいて、テキスト内容の現在のアライメント方法を設定または返します。

通常、テキストは指定された位置から始まりますが、textAlign="right" に設定し位置 150 にテキストを配置すると、位置 150 で終わります。

ヒント：を使用して fillText() または strokeText() メソッドは実際にキャンバス上にテキストを描画し、配置します。

例

位置 150 に赤い線を描画します。位置 150 は以下の例で定義されたすべてのテキストのアンカーです。各 textAlign 属性値の効果を研究してください：

ブラウザには canvas タグがサポートされていません。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 表示不同的 textAlign 値
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

実際に試してみる

文法

context.textAlign="center|end|left|right|start";

属性値

値 説明
start デフォルト。テキストが指定された位置で開始します。
end テキストが指定された位置で終了します。
center テキストの中心が指定された位置に配置されます。
left テキストを左対齐にします。
right テキストを右対齐にします。

技術詳細

デフォルト値： start

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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

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

HTML5 Canvas 参考手册