html - 用文本填充 Canvas 形状

Question

我正在尝试弄清楚如何将文本添加到 Canvas 形状例如，这是我的代码:

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(); 

如果有人能帮助我将文本添加到形状中，我将非常感激提前致谢。

编辑我发现我需要在 Canvas 上再次书写，所以这就是我到目前为止所得到的……但是文本没有对齐到圆心:

  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);

Answer 1

如你所见:

http://jsfiddle.net/DKcpS/

文本正在开始绘制在圆圈的中心，并从文本的顶部开始，因为您将 textBaseline 放在了 top.

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

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

如您所见，我们有一个 context.measureText(theTextToMeasure) 函数，它返回一个具有 width 属性的 textMetrics 对象。目前它没有高度，所以我们只能猜测。