25

計算できる長方形の領域内でテキストの単一行を中央に配置できるようにしたいと考えています。キャンバス上の 2D ジオメトリで期待していたことの 1 つは、幅がわからないものを中央に配置することです。

回避策として、HTML コンテナーでテキストを作成してから jQuery の関数を呼び出すことができると聞いたことがありますがwidth()、ドキュメントの本文への瞬間的な追加を正しく処理していませんか? 幅が 0 になりました。

画面の幅の大部分を占めるよりもかなり短い 1 行のテキストがある場合、キャンバス上で自分が知っているフォント サイズでどのくらいの幅になるかをどのように判断できますか?

4

5 に答える 5

50

これを行うには、 measureTextを使用します。

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

canvas.width = 400;
canvas.height = 200;

ctx.fillStyle = "#003300";
ctx.font = '20px sans-serif';

var textString = "Hello look at me!!!",
    textWidth = ctx.measureText(textString ).width;


ctx.fillText(textString , (canvas.width/2) - (textWidth / 2), 100);

ライブデモ

より精巧なデモ

于 2012-12-08T01:25:38.843 に答える
38

テキストの幅を必ずしも必要とせず、テキストを中央に配置したい場合は、次のことができます

  canvas_context.textBaseline = 'middle';
  canvas_context.textAlign = "center";

テキストを垂直方向と水平方向の両方に中央揃えにする必要があります。

于 2015-02-27T23:27:45.423 に答える
18

developer.mozilla.orgはtextAlign説明の中で、アラインメントはコンテキストのメソッドの x 値に基づいていると述べています。fillText()つまり、このプロパティはキャンバス内のテキストを水平方向の中央に配置しません。指定された x 座標を中心にテキストを中央に配置します。についても同様ですtextBaseLine。

したがって、テキストを両方向の中央に配置するには、これら 2 つのプロパティを設定し、テキストをキャンバスの中央に配置する必要があります。

ctx.textBaseline = 'middle'; 
ctx.textAlign = 'center'; 

ctx.fillText('Game over', canvas_width/2, canvas_height/2);
于 2015-10-12T13:40:36.627 に答える
-5

あなたがすることは、負のテキストインデントを使用してテキストを画面外にレンダリングし、サイズを取得することです。

text-indent: -9999px

参照: 「text-indent」を使用してテキストを隠す

于 2012-12-07T21:39:01.113 に答える