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)函数返回一个具有width属性的textMetrics对象。现在它没有高度，所以我们不得不猜测它。

用文本填充画布形状

1 个答案: