Question

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

我已经看过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);
    }
});

你可以将元素的内容克隆到画布中吗？

1 个答案: