canvas画板插入多张图片

要在Canvas画板中插入多张图片，可以使用以下步骤：

1. 创建多个Image对象，使用JavaScript代码创建多个Image对象，可以通过new Image()来创建。

2. 加载图片，使用Image对象的src属性来设置图片的路径，然后监听load事件来确保图片已经加载完成。

3. 在Canvas上绘制图片，使用Canvas上下文对象的drawImage()方法来在Canvas上绘制图片，可以指定图片的位置和大小。

以下是代码示例：

<canvas id="canvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img1 = new Image();
  img1.src = 'image1.jpg';
  var img2 = new Image();
  img2.src = 'image2.jpg';
  var img3 = new Image();
  img3.src = 'image3.jpg';
  var loadedImages = 0;
  var totalImages = 3;
  img1.onload = function() {
    loadedImages++;
    if (loadedImages === totalImages) {
      draw();
    }
  }
  img2.onload = function() {
    loadedImages++;
    if (loadedImages === totalImages) {
      draw();
    }
  }
  img3.onload = function() {
    loadedImages++;
    if (loadedImages === totalImages) {
      draw();
    }
  }
  function draw() {
    ctx.drawImage(img1, 0, 0, canvas.width, canvas.height);
    ctx.drawImage(img2, 100, 100, 200, 200);
    ctx.drawImage(img3, 300, 300, 100, 100);
  }
</script>

在上面的示例中，我们首先创建了一个Canvas元素和一个Canvas上下文对象，然后创建了多个Image对象并设置了图片路径，接着监听每个图片的load事件，每次图片加载完成后，将loadedImages加1，当所有图片都加载完成后，调用draw()函数，在函数中使用drawImage()方法在Canvas上绘制多张图片。