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

HTMLタグ一覧

HTML canvas textAlign属性

textAlignはCanvas 2D APIの説明では、テキストを描画する際のテキストのアライメント方式の属性です。注意していただきたいのは、このアライメントはCanvasRenderingContextに基づいています。2D.fillTextメソッドのxの値です。したがってtextAlign="center"の場合、テキストはxに描かれます。-50%*width。

HTML canvas 参考マニュアル

オンラインサンプル

位置150 中で赤い線を描画します。位置150 は以下のサンプルで定義されているすべてのテキストの位置です。各 textAlign 属性値の効果を研究してください：

サンプル

!DOCTYPE html
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas textAlign属性の使用-基本のチュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" height="2" style="border:1px solid #d3d3d3>
あなたのブラウザは HTML5　canvas タグ
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//位置150 赤い線を生成します
ctx.strokeStyle="red";
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);
</script>
</body>
</html>

テストをしてみる「‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox、Opera、Chrome および Safari は textAlign をサポートしています属性。

注意：Internet Explorer 8 及びそれ以前のバージョンでは<canvas>要素をサポートしていません。

定義と用法

定位点に応じて、textAlign属性がテキスト内容の現在のアライメント方法を設定または返します。

通常、テキストは指定された場所で始まりますが、textAlign =“ right”に設定し、位置にテキストを配置すると、150 は、テキストが位置に配置されることを意味します。150 終了。

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

デフォルト値：	start
JavaScript 语法：	context.textAlign="center\|end\|left\|right\|start";

属性値

値	説明
start	デフォルト。指定された場所でテキストが始まります。
end	指定された場所でテキストが終わります。
center	指定された場所にテキストの中心が配置されます。
left	指定された場所でテキストが始まります。
right	指定された場所でテキストが終わります。

HTML canvas 参考マニュアル

HTML: <template> タグ