Canvas textAlign 属性

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> エレメントをサポートしていません。

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