Javascript 如何使HTML5画布显示HTML？

我意识到画布不能直接呈现HTML。然而，似乎有一些潜在的解决办法。我不需要HTML完美地呈现，但我希望至少呈现HTML的图像

为此，我尝试将HTML转换为SVG。这适用于非常基本的html，但与许多用例不同（例如在html中包含图像）：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=新图像（）；
var数据=“”+
'' +
'' +
document.body.innerHTML+
''
var svg=newblob（[data]，{type:'image/svg+xml；charset=utf-8'}）；
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.图纸图像（img，0,0，c.宽度，c.高度）；
revokeObjectURL（url）；
}
img.src=url；

---

有没有一种更简单的方法可以让html正确地显示在画布上？

您可以创建一个基本的递归函数，以深入到使用开关或事件处理程序对象来处理某些元素的元素的子元素。我在这里演示前者：

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.clearRect（0,0，canvas.width，canvas.height）；
变量y=50//设置为最大文本
var偏移=25；
（功能下降（父级）{
对于（var i=0；i
H1H2H3
潜在解决方案：




此脚本允许您拍摄网页或部分内容的“截图”
它可以直接在用户浏览器上显示。屏幕截图基于DOM
因此，可能无法100%准确地反映实际情况
不生成实际的屏幕截图，但基于
页面上提供的信息




dom to image是一个库，它可以将任意dom节点转换为
矢量（SVG）或光栅（PNG）图像，用JavaScript编写

“SVG图像不允许加载任何外部资源，例如，即使是看起来来自同一域的图像。”试着看看dandavis的链接——它适用于具有简单样式的html。如果您需要在样式更密集的页面中工作，您可以在服务器上加载无头浏览器，并将html+css交给服务器浏览器以创建图像。我可以推荐PhantomJS：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();

var data =  '<svg xmlns="http://www.w3.org/2000/svg" width="' + screen.width + '" height="' + screen.height + '">' +
            '<foreignObject width="100%" height="100%">' +
            '<div xmlns="http://www.w3.org/1999/xhtml">' +
            document.body.innerHTML + 
            '</div></foreignObject></svg>'

var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
    ctx.drawImage(img,0,0,c.width,c.height);
    DOMURL.revokeObjectURL(url);
}
img.src = url;