HTMLキャンバスtextAlignプロパティ
例
位置150に赤い線を作成します。位置150は、以下の例で定義されているすべてのテキストのアンカーポイントです。各textAlignプロパティ値の効果を調べます。
JavaScript：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Show the different textAlign values
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);
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
| Property | |||||
|---|---|---|---|---|---|
| textAlign | Yes | 9.0 | Yes | Yes | Yes |
定義と使用法
textAlignプロパティは、アンカーポイントに従って、テキストコンテンツの現在の配置を設定または返します。
通常、テキストは指定された位置で開始されますが、textAlign = "right"を設定してテキストを150の位置に配置すると、テキストは150の 位置で終了する必要があります。
ヒント：fillText（）または strokeText（）メソッドを使用して、実際にテキストをキャンバスに描画して配置します。
| デフォルト値： | 始める |
|---|---|
| JavaScript構文： | context .textAlign = "center | end | left | right | start"; |
プロパティ値
| Values | Description | Play it |
|---|---|---|
| start | Default. The text starts at the specified position | |
| end | The text ends at the specified position | |
| center | The center of the text is placed at the specified position | |
| left | The text starts at the specified position | |
| right | The text ends at the specified position |
❮HTMLキャンバスリファレンス