3

たとえば、ここに私のコードがあります：

var text ="5"; // text to display over the circle
context.fillStyle = "red";
context.beginPath();
context.arc(50,70, 10, 0, Math.PI * 2);
context.closePath();
context.fill();

誰かがテキストを図形に追加するのを手伝ってくれたら、事前に感謝します。

編集 キャンバスにもう一度書く必要があることがわかったので、これがこれまでに得たものです...しかし、テキストは円の中心に整列しません:

  context.fillStyle = "red";
  context.beginPath();
  var radius = 10; // for example
  context.arc(200, 200, radius, 0, Math.PI * 2);
  context.closePath();
  context.fill();
  context.fillStyle = "black"; // font color to write the text with
  var font = "bold " + radius +"px serif";
  context.font = font;
  context.textBaseline = "top";
  context.fillText(text, 200-radius/4 ,200-radius/2);
4

1 に答える 1

9

ここでわかるように：

http://jsfiddle.net/DKcpS/

toを配置したため、テキストは円の中心から始まり、テキストの上部から描画されます。textBaselinetop

これは、テキストの幅と高さを使用して大まかに中央揃えされた同じテキストです。

http://jsfiddle.net/DKcpS/1/

ご覧のとおり、幅プロパティを持つオブジェクトをcontext.measureText(theTextToMeasure)返す関数があります。textMetrics今のところ高さはありませんので、推測する必要があります。

于 2012-04-21T22:25:29.733 に答える