在 html5 画布中实现 html [关闭]

Question

我正在构建一个网络用户界面。它是完全动态的，并且不断移动。
使用 Jquery 的ajax()，内容不断变化。
该界面最初是使用 Raphael 库在 html5 SVG 中构建的。 太慢了。
我考虑过使用画布库（如 paper.js/Caat.js/etc...） 但我无法在画布内实现 html 代码（如 SVG 中的 <foreign object> 标签）
我不能只在画布上方放置一个浮动 div，因为内容在不断移动。
任何想法我该如何解决这个问题？ 如何在html5画布中实现html代码？

Answer 1

查看html2canvas，它在 Canvas 中呈现 DOM。

我正在构建一个网络用户界面。

我将尝试为我们俩省去麻烦，并让您知道在 Canvas 中构建整个 UI 是一个非常糟糕的主意。我建议不要这样做。沉重。画布规范也是如此。 As the spec says:

作者应避免使用画布元素实现文本编辑控件。这样做有很多缺点：

• 必须重新实现插入符号的鼠标放置。
• 必须重新实现插入符号的键盘移动（可能跨行，用于多行文本输入）。
• 必须实现文本字段的滚动（水平滚动用于长行，垂直滚动用于多行输入）。
• 必须重新实现复制粘贴等原生功能。
• 必须重新实现拼写检查等原生功能。
• 必须重新实现拖放等原生功能。
• 必须重新实现页面范围的文本搜索等原生功能。
• 必须重新实现特定于用户的本机功能，例如自定义文本服务。这几乎是不可能的，因为每个用户可能安装了不同的服务，并且可能存在无限多的此类服务。
• 必须重新实现双向文本编辑。
• 对于多行文本编辑，必须为所有相关语言实现换行。
• 必须重新实现文本选择。
• 必须重新实现双向文本选择的拖动。
• 必须重新实现平台原生键盘快捷键。
• 必须重新实现平台原生输入法编辑器 (IME)。
• 撤消和重做功能必须重新实现。
• 必须重新实现辅助功能，例如插入符号或选择后的放大。

在 Canvas 中实现这些东西是一场噩梦。对于您和您的用户。