【发布时间】：2015-09-30 12:47:08
【问题描述】：
如果您在 Canvas 中编写文本，是否有可能以某种方式使“查找”（ctrl+f）工作？
我查看了https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text 的基本示例，在 chrome 中搜索“hello world”时，画布文本未突出显示。
有没有办法做到这一点？
如果没有，是否有人见过仅使用 DOM 实现“框线”图表（如 UML）？ （此后将支持原生查找文本）
【问题讨论】：
-
Html5 Canvas 在其画布上绘制文本 -- 您看到的文本是以字母形状排列的一组不可访问的像素，因此 Ctrl-f 将找不到文本.如果您想要可搜索的文本，您可以使用 CSS 将 html div 放置在画布上并将其内容设置为您想要的文本。然后 Ctrl-f 会找到它。您可以在 div 上设置
pointer-events: none，这样它就不会捕获您打算用于画布的事件。 -
一种疯狂（但不推荐）的解决方法是将包含所有文本的元素放在屏幕外。当 Ctrl-f 在该元素中找到某些内容时，您可以获取选定的文本并计算您在画布上绘制相同选定文本的位置。然后，您可以将画布上的选定文本重绘为蓝底白字，以表明它已“找到”。完全不推荐这种疯狂的解决方法，但它可能会奏效。
-
与此相关：RGraph (www.rgraph.net) 的下一个 beta 版本将支持使用 DOM 文本而不是画布文本。一个示例 URL 是 rgraph.net/demos/bar-basic.html（目前不是 - 当我发布下一个测试版时）。
-
@markE 在答案中输入您的 cmets，我会接受吗？ :)
-
@markE 酷！我做了一些阅读并意识到 svg 更适合我的“框线”图需求。但是 svgs 对多行溢出文本的处理很糟糕，所以我最终使用 SVG 来绘制线条和绝对定位的 div 框（正如你所建议的 :)）。我将 div 设置为 contentEditable，因此当您编写文本时它们会自动调整大小。如果您想尝试，请提供基本演示：docku.firebaseapp.com
标签： html5-canvas