javascript - 您可以将元素的内容克隆到 Canvas 中吗？

Question

我想知道是否可以将 HTML 元素克隆到 Canvas 中。所以看看这个JSFiddle ，如何将其复制到 Canvas 中？

我已经找到了 draw DOM objects into a canvas element 的方法，但我很好奇是否有一种不同的方法。

<p>Html</p>
<div id="clone-me">
  <div id="square">
  </div>
</div>

<p>Canvas</p>
<canvas width="200" height="200"></canvas>

#clone-me {
  width: 200px;
  height: 200px;
  background: #333;
}

#square {
  width: 70px;
  height: 70px;
  background: red;
}

Answer 1

您可以使用html2canvas为此，您可以在此处查看演示 JSFiddle .

html2canvas(document.getElementById('clone-me'), {
    onrendered: function(canvas) {
        var canvas1 = document.getElementById('canvas1');
        var ctx = canvas1.getContext('2d');
        ctx.drawImage(canvas, 0, 0);
    }
});