填充畫布形狀與文本

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

我非常並欣賞它，如果有人幫我添加文字到形狀 在此先感謝。

編輯 我找出我需要到畫布所以這再次寫是我得到那麼遠，但 文本犯規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); 

Answer 1

正如你可以在這裏看到：

http://jsfiddle.net/DKcpS/

文本是越來越繪製在開始因爲您將textBaseline設置爲top，所以從該文本的頂部開始。

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

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

正如你可以看到我們有一個context.measureText(theTextToMeasure)函數返回，其寬度屬性textMetrics對象。現在它沒有一個高度，所以我們必須猜測。