填充画布形状与文本

问题描述：

我试图找出如何将文本添加到画布形状例如，这里是我代码：填充画布形状与文本

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

我非常并欣赏它，如果有人帮我添加文字到形状在此先感谢。

编辑我找出我需要到画布所以这再次写是我得到那么远，但文本犯规allign到圆心：

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

答

正如你可以在这里看到：

http://jsfiddle.net/DKcpS/

文本是越来越绘制在开始因为您将textBaseline设置为top，所以从该文本的顶部开始。

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

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

正如你可以看到我们有一个context.measureText(theTextToMeasure)函数返回，其宽度属性textMetrics对象。现在它没有一个高度，所以我们必须猜测。

填充画布形状与文本

相关推荐