例
位置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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
textAlignプロパティセットまたはアンカーポイントに応じて、テキストコンテンツの現在のアラインメントを返します。
通常、テキストがしますSTARTあなたがtextAlign =「右」を設定している場合、しかし、指定された位置にし、位置150にテキストを配置、それはテキストが150位で 終了 しなければならないことを意味します。
Tip:使用fillText()またはstrokeText()実際に描画キャンバス上にテキストを配置する方法を。
| デフォルト値： | 開始 |
|---|---|
| JavaScriptシンタックス： | context .textAlign="center|end|left|right|start"; |
プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| 開始 | デフォルト。 テキストは、指定された位置から開始します | それを再生します» |
| 終わり | テキストは、指定された位置で終了します | それを再生します» |
| センター | テキストの中心は、指定された位置に配置されています | それを再生します» |
| 左 | テキストは、指定された位置から開始します | それを再生します» |
| 右 | テキストは、指定された位置で終了します | それを再生します» |
<Canvasオブジェクト