HTML5 canvas：在文本周圍繪制矩形？

Question

我希望能夠在文本標簽（人的全名）周圍繪制一個合適的矩形。 邊距並不是很重要，但是我不能只畫固定大小的矩形，因為標簽的長度是變化的。 我該怎么做呢？

這是繪制文本標簽的代碼：

var ctx = document.getElementById('map').getContext('2d');
for (i=0; i < num_people; i++) {
    var pos = get_position(i, num_people);
    ctx.fillText(names[i], pos.x, pos.y);
}

Answer 1

您可以使用measureText（）獲得繪制文本的大小。

Answer 2

畫布文本的有用鏈接：

• https://developer.mozilla.org/zh-CN/drawing_text_using_a_canvas （尤其是textBaseline上的部分和漂亮的圖表）
• 如何在HTML5 Canvas的文本上添加邊框？