我怎样才能将HTML元素转换为canvas元素？
暂时将常规元素转换为canvas将是非常有用的。 例如，说我有一个我想翻转的样式的div 。 我想dynamic地创build一个canvas，将HTMLElement “渲染”到canvas中，隐藏原始元素并为canvas设置animation。
可以这样做吗？
抱歉，浏览器不会将HTML呈现在canvas上。
如果可以的话，这将是潜在的安全风险，因为HTML可以包含来自第三方站点的内容（尤其是图像和内联框架）。 如果canvas可以将HTML内容转换为图像，然后读取图像数据，则可能会从其他站点提取特权内容。
要从HTML获取canvas，您必须使用drawImage和fillText从头开始编写自己的HTML渲染器，这是一项潜在的巨大任务。 这里有一个这样的尝试，但这有点不妥，还有很长的路要走。 （它甚至试图从头开始分析HTML / CSS，我认为这很疯狂！从应用了样式的真正的DOM节点开始，使用getComputedStyle和它的部分的相对位置来读取样式会更容易，使用offsetTop等）
有一个图书馆试图做你说的话。
看到这个例子，并获得代码
http://hertzen.com/experiments/jsfeedback/
http://html2canvas.hertzen.com/
从HTML中读取DOM并将其渲染到canvas上，但是在一般情况下会失败。
在natevw引用的Mozdev文章的基础上，我开始了一个小的项目，在Firefox，Chrome和Safari中呈现HTML到canvas。 例如，你可以简单地做：
rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>' + '<img src="local_img.png"/>', canvas);
源代码和更广泛的例子在这里 。
看看MDN上的这个教程： https ： //developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
它使用临时SVG图像将HTML内容包含为“外部元素”，然后将所述SVG图像呈现为canvas元素。 但是，以这种方式在SVG图像中包含的内容有很大的限制。 （有关详细信息，请参阅“安全性”部分。）
你可以使用dom-to-image库（我是维护者）。
以下是你如何解决你的问题：
var parent = document.getElementById('my-node-parent'); var node = document.getElementById('my-node'); var canvas = document.createElement('canvas'); canvas.width = node.scrollWidth; canvas.height = node.scrollHeight; domtoimage.toPng(node).then(function (pngDataUrl) { var img = new Image(); img.onload = function () { var context = canvas.getContext('2d'); context.translate(canvas.width, 0); context.scale(-1, 1); context.drawImage(img, 0, 0); parent.removeChild(node); parent.appendChild(canvas); }; img.src = pngDataUrl; });
这里是jsfiddle
没有这样的事，对不起。
虽然规格说明：
2D上下文API的未来版本可以提供一种将使用CSS呈现的文档片段直接呈现给canvas的方式。
这可能会像你会得到的一样接近。
很多人想要一个ctx.drawArbitraryHTML/Elementtypes的交易，但没有内置的东西。
唯一的例外是Mozilla独有的drawWindow ，它将DOM窗口内容的快照绘制到canvas中。 此function仅适用于使用Chrome（“仅限本地”）权限运行的代码。 这是不允许在正常的HTML页面。 所以你可以使用它来编写像这样的 FireFox扩展，但就是这样。
你可以省去转换，你可以使用CSS3转换翻转<div>和<ol>以及任何你想要的HTML标签。 下面是一些演示源代码解释来看和学习： http : //www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
animationDOM元素的最简单的解决scheme是使用CSS转换/animation，但我认为你已经知道，你尝试使用canvas做CSS的东西不让你做的东西。 什么关于CSS自定义filter ？ 如果你知道如何编写着色器，你可以用任何可以想象的方式来转换你的元素。 其他一些链接 ，不要忘记检查CSSfilter实验室 。
注意 ：正如您可以想象的那样，浏览器支持不好。
function convert() { dom = document.getElementById('divname'); var script, $this = this, options = this.options, runH2c = function(){ try { var canvas = window.html2canvas([ document.getElementById('divname') ], { onrendered: function( canvas ) { window.open(canvas.toDataURL()); } }); } catch( e ) { $this.h2cDone = true; log("Error in html2canvas: " + e.message); } }; if ( window.html2canvas === undefined && script === undefined ) { } else {. // html2canvas already loaded, just run it then runH2c(); } }
