用文本填充画布形状答案

【问题标题】：filling a canvas shape with text用文本填充画布形状
【发布时间】：2012-05-02 20:41:45
【问题描述】：

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

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

【问题讨论】：

标签： html canvas drawing

【解决方案1】：

如您所见：

http://jsfiddle.net/DKcpS/

文本从圆的中心开始开始绘制，并从文本顶部开始，因为您将textBaseline 设置为top。

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

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

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

【讨论】：