Javascript 在html5画布中将文本绘制为图像

我在一个HTML5项目中工作。我想画有边界的文本（即文本注释）

首先，我在mousemove上绘制一个矩形并在其中填充文本，如下所示：

context.strokeRect(x,y,w,h);
context.fillText('Enter youe text here',x,y);

但当我开始绘制文本注释时，文本将完全绘制。因此文本溢出到矩形边界之外。所以我想拍摄矩形部分的图像，然后我可以处理文本的溢出问题。我使用以下方法来完成此操作：-

 context.strokeRect(x,y,w,h);
 context.fillText('Enter youe text here',x,y);
 var imageData = context.getImageData(x,y,w,h);
 var data = imageData.data;
 context.putImageData(imageData, x,y);

通过这种方式，文本图像成功地在创建，但现在我如何隐藏fillText（x，y，w，h）语句，并且在文本的帮助下在矩形内获取图像数据

---

事先非常感谢

如果我理解正确，您似乎想测量文本宽度并将画布拆分

我制作了一个小示例，解释了如何使用measureText方法：

实际上，正如您在演示中看到的，它没有返回测量的高度标注。因此，您可能需要一行一行地循环浏览画布，以了解文本的高度

对于我的JS游戏引擎，我做了一个小字体工具，它可以做到这一点，并将其导出为JSON格式，也许后面的算法可以帮助您：）

代码可在github.com/martensms/lycheeJS上找到 （不能发布超过两个链接，因为我是SO新手）

---

~Cheers

你问了“11个问题”，你必须接受几个问题才能提高评分：）好的，我已经检查了对我有用的答案。那么现在我如何在矩形内绘制图像呢