Javascript 画布上一个文本的不同格式？

假设我有以下文本：

The Text

是否可以在画布上书写此文本，但要使用

粗体和
文本
普通

所以它看起来是这样的：

文本

我知道整个文本的加粗方法，但我找不到单独格式化的方法。
只要加粗的单词是第一个，你就可以在现有文本上写：


var canvas=document.body.appendChild（document.createElement（“canvas”）；
var size=canvas.width=canvas.height=200；
var ctx=canvas.getContext（“2d”）；
函数绘图（）{
clearRect（0，0，size，size）；
ctx.font=“10pt快递”；
ctx.fillText（“文本”，100100）；
setTimeout（函数（）{
ctx.font=“bold 10pt快递”；
ctx.fillText（“The”，100100）；
设置超时（绘图，1000）；
}, 1000);
}
draw（）绘制文本很难，最难的部分是根据字体计算文本的位置（第一个粗体部分位于
（0,0）
，第二个位于
（50,0）
）

我建议您（看起来不再需要维护，但运行良好），它已经可以处理所有事情，并且有一个HTML友好的数据模型。如果您不想要任何依赖项，或者您认为它太多，那么Emil的解决方案会更好。
也许这会对您有所帮助。只需写两遍课文


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“Bold 30px Arial”；
ctx.fillText（“The”，10,50）；
ctx.font=“30px Arial”；
ctx.fillText（“文本”，70,50）
如果单词
这个
是随机的，有时会变成
一个
，该怎么办？@ChrisK。我对我的答案进行了编辑，以处理动态文本。另请参见：