js 复制html元素通过canvas绘制出来

要通过canvas绘制HTML元素，首先需要将HTML元素复制到canvas上。以下是一个示例代码：

HTML部分：

<div id="source">
  <h1>Hello, World!</h1>
  <p>This is a sample text.</p>
</div>
<canvas id="canvas"></canvas>

JavaScript部分：

// 获取源HTML元素和目标canvas元素
var source = document.getElementById('source');
var canvas = document.getElementById('canvas');

// 获取源HTML元素的宽度和高度
var width = source.offsetWidth;
var height = source.offsetHeight;

// 设置canvas的宽度和高度
canvas.width = width;
canvas.height = height;

// 获取canvas的2D上下文
var ctx = canvas.getContext('2d');

// 使用toDataURL方法将源HTML元素复制到canvas上
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:12px">' +
           source.innerHTML +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
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);
  DOMURL.revokeObjectURL(url);
};

img.src = url;

这段代码首先获取源HTML元素和目标canvas元素，然后获取源HTML元素的宽度和高度，并设置canvas的宽度和高度。接下来，使用toDataURL方法将源HTML元素复制到canvas上，通过创建一个SVG Blob对象和一个Image对象，将SVG Blob对象的URL设置为Image对象的src，最后在Image对象加载完成后，使用drawImage方法将Image对象绘制到canvas上。