HTML5画布：在文本周围绘制矩形？

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/en/drawing_text_using_a_canvas（特别是textBaseline上的部分和漂亮的图表）
• How to add a border on HTML5 Canvas' Text?