We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Canvas 2D API の CanvasRenderingContext2D.textAlign プロパティは、テキストを描画するときに用いられる現在のテキスト配置を指定します。CanvasRenderingContext2D.fillText メソッドの x の値に基づいて配置されることに注意してください。従って textAlign="center" は、テキストを x-50%*width の位置から描画します。

構文

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

オプション

指定可能な値:

left
テキストを左揃えにします。
right
テキストを右揃えにします。
center
テキストを中央揃えにします。
start
テキストを行の標準な開始位置から配置します (左から右へのロケールは左揃え、右から左へのロケールは右揃え)。
end
テキストを行の標準な最終位置から配置します(左から右へのロケールは右揃え、右から左へのロケールは左揃え)。

デフォルト値は start です。

textAlign プロパティの使用例

さまざまなテキスト配置を設定するために textAlign プロパティを使用する、シンプルなコードスニペットです。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.textAlign = "left";
ctx.strokeText("Hello world", 0, 100);

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

仕様

仕様書 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.textAlign の定義
現行の標準  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 3.5 (1.9.1) 9 (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.9.1) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss
最終更新者: yyss,