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

Question

我已经使用 filltext() 在画布上写了文本。现在在另一个函数中，我想将该值作为字符串检索。如果有人可以帮助我，请。提前致谢。

Answer 1

当您将文本写入画布时，还要向包含文本本身的画布对象添加自定义属性。当您想检查它时，只需查询该属性。所以：

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

然后，

var textToCheck = myCanvas.addedText;

Answer 2

您可能会对这篇 w3c 文章感兴趣：

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

这使用户代理能够使用 subdom 文本来提供可访问的体验，因为 subdom 文本充当位图中呈现文本的代理。

这是一个为可访问性而构建的示例：

<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>

因此，您需要做的就是当用户输入文本时，将其存储在画布元素内的 div 中。