如何在HTML5畫布上呈現DIV內容

Question

我有一個代碼可以在畫布上呈現div內容，但是很多地方我只是不明白。 所以指導我。 這是我得到的代碼。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>" +
                "<ul> <li style='color:red'> hello </li>  <li style='color:green'>thomas</li> </ul> "  +   
               "</div>" +
             "</foreignObject>" +
           "</svg>";

var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

1） data:image/svg+xml是什么意思2） <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>的含義是<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>

3）什么是<foreignObject width='100%' height='100%'>

如果可能，請說明其含義和用法。

畫布和瀏覽器兼容性問題的另一個最重要的問題， 我們知道許多瀏覽器版本不支持html5 Canvas，在這種情況下，我們可以回退並加載Flash畫布

所以指導我如何加載Flash畫布，最重要的是在Flash畫布上繪制或渲染div內容。

詳細尋找指導。 謝謝

Answer 1

如果不是root元素，則可以使用svg元素在當前文檔（可以是HTML文檔）中嵌套一個獨立的SVG片段。 這個獨立的片段具有自己的viewPort和坐標系統。

foreignObject元素允許包含外部XML名稱空間，該名稱空間的圖形內容由其他用戶代理繪制。 所包含的外部圖形內容需要進行SVG轉換和合成。

您可以從此鏈接中找到源https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas