用文本填充画布形状

Question

我想弄清楚如何将文本添加到画布形状,例如这里是我的代码:

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

Answer 1

正如你在这里看到的:

http://jsfiddle.net/DKcpS/

文字越来越绘制起点在圆的中心,并与文本的顶部开始,因为你把textBaseline到top.

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

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

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