如何检索在画布上写为字符串的文本

Question

我使用filltext（）在画布上写了文字。现在在另一个函数中，我想将该值检索为字符串。如果有人能帮助我请。 提前谢谢。

Answer 1

将文本写入画布时，还要将自定义属性添加到包含文本本身的画布对象。如果要检查它，只需查询该属性即可。所以：

myCanvas.getContext("2d").filltext(theText,x,y,maxWidth);
myCanvas.addedText = theText;

后来，

var textToCheck = myCanvas.addedText;

Answer 2

This w3c article might be of interest to you:

  

当作者使用fillText或strokeText在画布上呈现文本时，   他们还必须添加一个带有相同文本的html元素（div或span），   画布子的样式和位置。的边界框   应使用setElementPath方法设置文本（请参阅   http://www.w3.org/wiki/Canvas_hit_testing）

     

这使用户代理能够使用子文本来传递   随机体验，因为subdom文本作为代理   在位图中渲染文本。

And here's an example built for accessibility:

<canvas id="example" width="260" height="200" role="img">   <p>A <a href="http://en.wikipedia.org/wiki/Rectangle">rectangle</a> with a black border. In the background is a pink circle. Partially overlaying the circle is a green square and a purple triangle, both of which are semi-opaque, so the full circle can be seen underneath.</p>   </canvas>

所以你需要做的就是当用户输入文本时，将它存储在canvas元素内的div中。