Javascript 如何在html画布中创建它，处理高度可变的自由流动文本

我需要在HTML画布中创建它，从我所做的研究中，我努力找到任何有用的例子（大多数只是演示巨大视觉效果的实验）。 我已经看过这个项目好几年了。而且有趣

---

我不会使用react，我希望在画布中独立执行此操作（需要时使用任何画布库）

有一个函数可用于检查文本的长度：

ctx.measureText(string).width;

您可以递增地向一行添加单词，直到它变得太长，然后发布它并向下移动一行并重复

草率的小提琴向你展示了这个概念：

编辑：上面的小提琴切掉每个句子的最后一个单词。我在这里成功了：

c=document.getElementById（“我的画布”）；
ctx=c.getContext（“2d”）；
var text=“这是一个很长的文本，我想把它包装成一定的宽度。我真的希望我的函数能够处理这个问题，YIKES！”；
函数writeText（wrapWidth、textString、x、y、fontSize、fontFamily）{
var words=textString.split（“”）；
var=”；
无功电流y=y；
ctx.font=fontSize+“pt”+fontFamily
对于（变量i=0；宽度）{
ctx.fillText（试探文本，x，当前Y）；
currentY+=fontSize+4；//4是行距
TENTEXT=“”；
我--；
}
否则{
TENTEXT+=“”+单词[i]；
}
}
ctx.fillText（试探文本，x，当前Y）；
}
writeText（200，text，50,20,15，“Arial”）
向上投票。回答得好。您还可以从
writeText
返回
currentY
值，以便知道当前段落停止绘制的位置。如果要将多个段落串在一起，这对于垂直定位非常重要。@markE，谢谢。在我离开公司之前，我的时间有限，所以公司变得很草率。理想情况下，我还会将x坐标和y坐标（可能还有字体信息）作为参数添加到函数中。