html2canvas动态生成多个画布

您好！要使用html2canvas动态生成多个画布，您可以按照以下步骤进行操作：

1. 首先，确保您已经引入了html2canvas库。您可以在HTML文件的头部添加以下代码来引入库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

2. 创建一个用于承载画布的容器元素。例如，您可以使用一个 `<div>` 元素作为容器：

<div id="canvasContainer"></div>

3. 使用JavaScript代码动态生成多个画布。您可以使用循环来创建多个画布，并将它们添加到容器中。以下是一个示例代码：

var canvasContainer = document.getElementById("canvasContainer");

for (var i = 0; i < 5; i++) {
  var canvas = document.createElement("canvas");
  canvas.id = "canvas" + i;
  canvasContainer.appendChild(canvas);
  
  // 使用html2canvas生成画布的截图
  html2canvas(document.getElementById("canvas" + i)).then(function(canvas) {
    // 在这里可以对生成的画布进行后续处理，例如保存、显示等
    console.log(canvas);
  });
}

在上面的代码中，我们使用循环创建了5个画布，并将它们添加到容器中。然后，我们使用html2canvas库的`html2canvas`函数来生成每个画布的截图。在`then`回调函数中，您可以对生成的画布进行后续处理，例如保存到服务器或显示在网页中。

请注意，由于html2canvas是一个异步操作，所以在处理生成的画布时要小心处理顺序和引用。您可能需要使用闭包或其他方法来确保正确处理每个生成的画布。

希望这可以帮助到您！如有任何疑问，请随时提问。