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'>

3的意思）是什麼<foreignObject width='100%' height='100%'>

如果可能的話，請解釋一下其含義&使用。

另一個最重要的問題是帆布&瀏覽器兼容性問題 我們知道，很多瀏覽器版本不支持HTML5 Canvas和在這種情況下，我們可以回退和負載閃帆布

這樣指導我如何加載閃存畫布，也是最重要的是在Flash畫布上繪製或渲染div內容。

尋找詳細的指導。謝謝

Answer 1

當它不是根元素時，可以使用svg元素在當前文檔（可以是HTML文檔）中嵌套一個獨立的SVG片段。這個獨立的片段有它自己的viewPort和它自己的座標系統。

的foreignObject元件允許用於包括具有由不同的用戶代理繪製其圖形內容的外國XML命名空間的。包含的外部圖形內容受SVG轉換和合成的約束。

你可以從這個鏈接https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas