html - html5 キャンバスに html を実装する

Question

私はWeb UIを構築しています。それは完全にダイナミックで、常に動いています。
Jqueryのajax().
インターフェイスは、Raphael ライブラリを使用して html5 SVG で最初に構築されました。遅すぎました。
キャンバス ライブラリ (paper.js/Caat.js/etc... など) を使用することを考えましたが、キャンバス内に html コードを実装できません ( <foreign object>SVG のタグのように)
。コンテンツが内容的に動いているためです。
どうすればこれを解決できますか？html5 キャンバスに html コードを実装するにはどうすればよいですか?

Answer 1

Canvas で DOM をレンダリングするhtml2canvasを見てください。

私はWeb UIを構築しています。

私は両方の問題を解決しようと努めており、Canvas で UI 全体を構築することは本当に悪い考えであることをお知らせします。私はこれに反対することをお勧めします。重く。キャンバス仕様も同様です。仕様が言うように：

作成者は、canvas 要素を使用してテキスト編集コントロールを実装することを避ける必要があります。そうすることには、多くの欠点があります。

• キャレットのマウス配置を再実装する必要があります。
• キャレットのキーボード移動を再実装する必要があります (複数行のテキスト入力の場合、複数行にわたる可能性があります)。
• テキスト フィールドのスクロールを実装する必要があります (長い行の場合は水平方向、複数行入力の場合は垂直方向)。
• コピー アンド ペーストなどのネイティブ機能を再実装する必要があります。
• スペル チェックなどのネイティブ機能を再実装する必要があります。
• ドラッグ アンド ドロップなどのネイティブ機能を再実装する必要があります。
• ページ全体のテキスト検索などのネイティブ機能を再実装する必要があります。
• ユーザー固有のネイティブ機能 (カスタム テキスト サービスなど) を再実装する必要があります。各ユーザーには異なるサービスがインストールされている可能性があり、そのようなサービスには無限のセットがあるため、これはほぼ不可能です。
• 双方向テキスト編集を再実装する必要があります。
• 複数行のテキスト編集では、関連するすべての言語に対して行の折り返しを実装する必要があります。
• テキスト選択を再実装する必要があります。
• 双方向のテキスト選択のドラッグを再実装する必要があります。
• プラットフォーム ネイティブのキーボード ショートカットを再実装する必要があります。
• プラットフォーム ネイティブのインプット メソッド エディター (IME) を再実装する必要があります。
• 元に戻す機能とやり直し機能を再実装する必要があります。
• キャレットまたは選択に続く拡大などのアクセシビリティ機能を再実装する必要があります。

この種のものを Canvas に実装するのは悪夢です。あなたとあなたのユーザーの両方のために。