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/

文本从圆圈的中心开始绘制，并从文本的顶部开始，因为你把textBaselineto top。

这是使用文本的宽度和高度大致居中的相同文本：

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

如您所见，我们有一个context.measureText(theTextToMeasure)函数返回一个textMetrics具有宽度属性的对象。现在它没有高度，所以我们不得不猜测一下。

于 2012-04-21T22:25:29.733 回答