浏览器

时间:2015-09-30 12:47:08

标签: html5-canvas

是否有可能以某种方式使"找到" (ctrl + f)如果你在Canvas中写文本吗?

我查看了https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text的基本示例以及搜索" hello world"在chrome中,画布文本不是高亮的。

有没有这样做?

如果还没有,有人看过"盒子和线条的实现"图表(如UML)只使用DOM? (从那时起支持原生查找文本)

1 个答案:

答案 0 :(得分:1)

Html5 Canvas在其画布上绘制文本 - 您看到的文本是以字母形状排列的无法访问的像素集,因此Ctrl-f将找不到文本。如果您需要可搜索的文本,可以使用CSS在画布上放置html div并将其内容设置为所需的文本。然后Ctrl-f会找到它。您可以在div上设置pointer-events: none,这样它就不会捕获您想要用于画布的事件。

一种狂野(并且不推荐)的解决方法是在屏幕外放置包含所有文本的元素。当Ctrl-f在该元素中找到某些内容时,您可以获取所选文本并计算在画布上绘制相同选定文本的位置。然后,您可以将画布上的选定文本重新绘制为蓝白色文本,以指示它是"找到"。完全不推荐这种疯狂的解决方法,但它可能会起作用