例
位置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); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| textAlign | はい | 9.0 | はい | はい | はい |
定義と使用法
textAlignプロパティセットまたはアンカーポイントに応じて、テキストコンテンツのための現在の配置を返します。
通常、テキストは、textAlign = "右"を設定した場合、しかし、指定された位置にSTARTと位置150にテキストを配置します、それは、テキストが150位で 終わるべきであることを意味します。
ヒント：使用fillText()またはstrokeText()実際に描画し、キャンバス上にテキストを配置する方法を。
| デフォルト値： | 開始 |
|---|---|
| JavaScriptシンタックス： | context.textAlign="center|end|left|right|start"; |
プロパティ値
| 価値観 | 説明 | それを再生します |
|---|---|---|
| start | デフォルト。 テキストは指定された位置から開始します | それを再生します» |
| end | テキストは指定された位置で終了します | それを再生します» |
| center | テキストの中心を指定した位置に配置されています | それを再生します» |
| left | テキストは指定された位置から開始します | それを再生します» |
| right | テキストは指定された位置で終了します | それを再生します» |