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

如果可能请解释其含义＆amp;的使用。

另一个最重要的问题 Canvas＆amp;浏览器兼容问题我们知道许多浏览器版本不支持html5 Canvas，在这种情况下我们可以回退并加载flash canvas

所以指导我如何加载flash画布，最重要的是在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

如何在Html5 Canvas上呈现DIV内容

1 个答案: