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的文本上添加边框？