Javascript 如何根据fillText（）宽度确定准确的fillRect（）宽度？

我尝试了下面的代码

var text = "Sample Text";
var b1 = "Bold";
var txtContext = txtCanvas.getContext("2d");
var width = txtContext.measureText(text).width;

txtContext.fillStyle = "blue";
txtContext.fillRect(0, 0, width * 9.7, height);

txtContext.textBaseline = "middle";
txtContext.fillStyle = 'gray';
txtContext.font = b1 + "90px Arial";
txtContext.fillText(text, 10, 50);

我希望蓝色背景适合文本。在某些情况下，这似乎没什么问题，但问题是，文本是动态变化的，当我将文本设置为只有1-4个小字符时，蓝色背景有时很短，而当我将文本设置为长且全部大写时，蓝色背景变得太长。我希望它是合适的，并且在文本的开头和结尾至少有小的填充。

---

注：文本字体大小和字体系列固定为90px Arial，但“粗体”将固定为90px Arial。

主要思想是在填充矩形之前测量文本。接下来，使用文本的宽度填充矩形，最后填充文本。我希望有帮助

观察：如果画布的宽度小于所需的宽度，则可能需要重置画布的宽度。您可以在填充rect和文本后执行此操作

//设置画布宽度
txtCanvas.width=window.innerWidth；
//以及背景
var txtContext=txtCanvas.getContext（“2d”）；
var text=“示例文本”；
var b1=“粗体”；
txtContext.textBaseline=“中间”；
txtContext.font=b1+“90px arial”；
//在填充之前先测量一下文本
var width=txtContext.measureText（text）.width；
//使用文本的宽度填充矩形
txtContext.fillStyle=“蓝色”；
txtContext.fillRect（0,0，宽度+20100）；//+因为课文从10点开始
//填空
txtContext.fillStyle='gray'；
fillText（文本，10,50）
谢谢，这个答案正是我想要的。