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

我在HTML5项目中工作。我想绘制带有边界的文本（即文本注记）。在HTML5画布中将文本绘制为图像

首先我正在绘制一个矩形，并在鼠标移动填充里面的文字如下：

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）语句，我也在文本帮助下将图像数据嵌入矩形。

感谢很多提前

来源

2012-07-23 Shanky

你问“11个问题”你必须接受少数的人来增加率:) – swapnesh 2012-07-23 06:23:06

好的，我检查了对我有用的答案。所以，现在我怎么可以在矩形内绘制图像。 – Shanky 2012-07-23 06:34:55

可能重复[如何找到HTML画布上的文本高度？]（http://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-一个-HTML的帆布） – 2013-11-19 13:17:17

它似乎要测量的文本的宽度和分裂帆布起来，如果我理解正确？

我的原型，说明了如何使用measureText方法一个小例子：

http://jsfiddle.net/sQ3S7/

其实，你可以看到在演示中，它没有返回测量高度尺寸。因此，您可能需要逐行循环浏览画布以了解文本的高度。

对于我的JS游戏引擎，我做了一个小的字体工具，它正是这么做的，并出口到一个JSON格式，也许算法背后会帮助你对你的方式:)

http://martens.ms/lycheeJS/tool/Font.html

代码可以用github.com/martensms/lycheeJS （不能发布两个以上的链路，因为我是新来的SO）

〜干杯

来源

2012-07-23 09:01:21

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

回答

相关问题