多个canvas画布合并

要将多个canvas画布合并，可以采用以下步骤：

1. 创建一个新的canvas画布，作为最终的合并结果。

2. 获取每个要合并的canvas画布的图像数据，可以使用canvas的`toDataURL()`方法。

3. 将每个canvas画布的图像数据绘制到最终的合并结果canvas上，可以使用canvas的`drawImage()`方法。

4. 最后，将最终的合并结果canvas的图像数据转换为图片，可以使用`toDataURL()`方法。

以下是一个示例代码，可以将两个canvas画布合并成一个：

// 创建最终的合并结果canvas
var canvas3 = document.createElement('canvas');
canvas3.width = 600;
canvas3.height = 400;
var ctx3 = canvas3.getContext('2d');

// 获取第一个要合并的canvas画布
var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
var img1 = new Image();
img1.src = canvas1.toDataURL('image/png');

// 获取第二个要合并的canvas画布
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
var img2 = new Image();
img2.src = canvas2.toDataURL('image/png');

// 将两个canvas画布的图像数据绘制到最终的合并结果canvas上
img1.onload = function() {
  ctx3.drawImage(img1, 0, 0);
  img2.onload = function() {
    ctx3.drawImage(img2, 0, 0);
    // 将最终的合并结果canvas的图像数据转换为图片
    var finalImg = new Image();
    finalImg.src = canvas3.toDataURL('image/png');
    document.body.appendChild(finalImg);
  };
};