在html5畫布中實現html

Question

我在構建Web UI。它是完全動態的，並且不斷移動。
內容通過使用jquery的ajax()不斷變化。
界面首先使用Raphael庫在html5 SVG中構建。 它太慢了。
我想過使用畫布庫（如paper.js/Caat.js/etc ...） 但我無法在畫布內實現HTML代碼（如SVG中的<foreign object>標記）
我不能在畫布上方放置浮動div，因爲內容在內容上移動。
任何想法如何解決這個問題？ 如何在html5畫布中實現html代碼？

Answer 1

看看html2canvas，它在Canvas中呈現DOM。

我正在構建一個Web UI。

我要試試並拯救我們既麻煩，讓你知道在畫布上構建一個完整的UI是一個非常糟糕的主意。我建議不要這樣做。重。畫布規格也是如此。 As the spec says:

作者應避免使用canvas元素實現文本編輯控件。這樣做有很多缺點：

• 鼠標放置的脫字符必須重新實現。
• 插入符號的鍵盤移動必須重新實現（可能跨行，用於多行文本輸入）。
• 必須執行文本字段的滾動（水平方向爲長行，垂直方向爲多行輸入）。
• 必須重新實現複製和粘貼等本機功能。
• 必須重新實現拼寫檢查等本機功能。
• 必須重新實現拖放等本機功能。
• 必須重新實現頁面範圍文本搜索等原生特性。
• 必須重新實現特定於用戶的本地功能，例如自定義文本服務。這幾乎是不可能的，因爲每個用戶可能安裝了不同的服務，並且存在無限可能的這種服務。
• 必須重新實現雙向文本編輯。
• 對於多行文本編輯，必須爲所有相關語言實現換行。
• 文本選擇必須重新實現。
• 拖動雙向文本選擇必須重新實現。
• 必須重新實現平臺本機鍵盤快捷鍵。
• 必須重新實現平臺本機輸入法編輯器（IME）。
• 撤消和重做功能必須重新實現。
• 輔助功能，如插入後的放大倍數或選擇必須重新實現。

實現這些各種各樣的帆布事情是噩夢。對於你和你的用戶。