HTML5 Canvasでテキストを描画

HTML5 Canvasは、HTMLキャンバス上にさまざまなフォント、サイズ、色を使用できます5キャンバス上にテキストを描画します、テキストの外観はこれら2D Context font属性を制御します、テキストを描画するには、fillText()またはstrokeText()機能を使用してください。

オンラインサンプル

HTMLキャンバス上には、さまざまなフォント、サイズ、色を使用できます5キャンバス上にテキストを描画します。
テキストの外観はこれら2D Context font属性を制御します。また、描画するテキストを塗りつぶしテキストか描線テキストかによってfillStyleまたはstrokeStyleを設定する必要があります2D Context属性。
テキストを描画するには、fillText()またはstrokeText()機能を使用してください
これはシンプルなコードの例です:

<canvas id="ex1" width="500" height="100" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvasはサポートされていません
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d);
　　　context.font = ""36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML",5　Canvas　Text　50,　50);
　　　context.font = "normal"　36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("HTML"}}5　Canvas　Text　50,　90);
　</script>

これはキャンバス上に描画時の結果です:

フォントとスタイル

HTML5キャンバス上にテキストを描画する際には、使用するフォントを設定する必要があります。これは以下で設定されます2Dコンテキストfont属性の値で完了します。この属性はCSS互換の文字列で、以下の形式で構成されています:

[font　style][font　weight][font　size][font　face]

例えば

context.font　=　"normal　normal　20px　Verdana";

フォント文字列の各部分に以下の値を設定できます:

すべての値がすべてのブラウザでサポートされているとは限りません。依存する前に、使用する予定の値をテストする必要があります。
これは別の例です:

"italic　bold"　36px　Arial"

描画テキスト

前述の通り、HTML5キャンバス上にテキストを描画する際には、塗りつぶしテキストや輪郭テキストを描画できます。以下を使用して2Dコンテキスト関数fillText()とstrokeText()を操作します。これらの関数の定義は以下の通りです:

fillText　　　(textString,　x,　y　[,maxWidth]);
strokeText　(textString,　x,　y　[,maxWidth]);

textStringパラメータは描画するテキストです。
xとyはテキスト内で得られる位置を表します。xパラメータはテキストの開始位置です。yパラメータはテキストの垂直位置ですが、正確な表示方法はテキストのベースラインに依存します。テキストのベースラインは後で説明します。
このmaxWidthテキストは以下の部分に重ねられます。
これはコード例です:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas　Text　50,　50);

テキストの最大幅

オプションのmaxWidthパラメータは、テキストが水平方向で指定されたパラメータ値以上のスペースを占められないことをキャンバスに伝えます。テキストがmaxWidthを超えると、テキストの幅が圧縮されます。切断されることはありません。これは、同じテキストを描画する際に使用と使用しない場合のコード例ですmaxWidth:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas　Text　50,　50);
context.fillText("HTML",5　Canvas　Text　50,　100,　200);

これはHTML5キャンバス上に描画されたときのこれらのテキストの見た目:

ご覧の通り、二つ目のテキストの幅はmaxWidthに合わせて圧縮されています。 200ピクセル.

テキストの色

他のどんな形状と同じように、2DコンテキストのfillStyleとstrokeStyle属性は、塗りつぶしや描画するテキストの色を設定します。これらの属性についてさらに詳しく説明することはしません。もっと詳しい情報は、以下を参照してください描画と塗りつぶし。

テキストの幅を測定

2Dコンテキストオブジェクトは、テキストのピクセル幅を測定する機能があります。高さを測定することはできません。この関数はmeasureText()と呼ばれます。以下はコードの例です:

var　textMetrics　=　context.measureText("measure　this");
var　width　=　textMetrics.width;

テキストの幅を測定することで、テキストの文字列が特定のスペースに収まるかどうかなどを計算することができます。

文字のベースライン

テキストのベースラインは、yパラメータをどのように解釈するかを決定します。つまり、垂直に配置されるテキストの場所とその位置の解釈方法です。また、ブラウザがこの属性を解釈する方法には微妙な差がありますので、ご注意ください。fillText()strokeText()
textBaselineを使用して2Dコンテキストの属性はテキストのベースラインを設定します。以下はそれが採用できる値とその意味です:

これは、すべてのテキストに同じ値を使用する例です（75）を描画しますが、描画する各テキストには異なるベースラインを使用します。線y=75、y値にテキストのベースラインを設定する方法を示します。

以下は、上記の図を生成するコードです:

context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo(　　0,　75);
context.lineTo(500,　75);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top",　0,　75);
context.textBaseline = "hanging";
context.fillText("hanging",　40,　75);
context.textBaseline = "middle";
context.fillText("middle"　120,　75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic",　200,　75);
context.textBaseline = "ideographic";
context.fillText("ideographic",　300,　75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph",　400,　75);

テキストアライメント

2Dのcontext textAlign属性は、テキストが描かれる際の水平対齐を定義します。つまり、textAlign属性はテキストがxに描かれる座標を定義します。

以下は、textAlign属性の動作を示す例です。垂直線はx = 250。すべてのテキストもx = 250、しかしtextAlign属性の値が異なります。

これはグラフのコードの例です：

<canvas id="ex4" width="500" height="120" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvasはサポートされていません
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d);
context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo(　250, 0);
context.lineTo(　250,　250);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textAlign　=　"center";
context.fillText("center",　250,　20);
context.textAlign　=　"start";
context.fillText("start",　250,　40);
context.textAlign　=　"end";
context.fillText("end",　250,　60);
context.textAlign　=　"left";
context.fillText("left",　250,　80);
context.textAlign　=　"right";
context.fillText("right",　250,　100);
</script>

コードの実行結果は以下の通りです：