如何使用单个函数在画布上绘制多个图像？

在画布上绘制多个图像可以通过使用单个函数来实现。以下是一种常见的方法：

1. 创建一个画布对象：首先，需要创建一个画布对象，可以使用HTML5的Canvas元素来实现。在HTML文件中添加一个Canvas元素，并为其指定一个唯一的ID，例如：

<canvas id="myCanvas"></canvas>

1. 获取画布上下文：使用JavaScript代码获取画布的上下文，以便后续绘制图像。可以使用Canvas的getContext()方法来获取上下文对象，例如：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

1. 绘制图像：使用上下文对象的绘制方法来绘制图像。可以使用drawImage()方法来绘制图像，该方法接受图像对象、位置和尺寸等参数。例如，绘制一张图片：

var img = new Image();
img.src = "image.jpg";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

1. 绘制多个图像：要绘制多个图像，可以在绘制每个图像之前调用drawImage()方法。可以根据需要设置每个图像的位置和尺寸。例如，绘制两张图片：

var img1 = new Image();
img1.src = "image1.jpg";
img1.onload = function() {
  ctx.drawImage(img1, 0, 0);
};

var img2 = new Image();
img2.src = "image2.jpg";
img2.onload = function() {
  ctx.drawImage(img2, 100, 100);
};

1. 其他操作：除了绘制图像，还可以在画布上进行其他操作，例如绘制文本、绘制形状等。可以使用上下文对象的相关方法来实现。

综上所述，通过使用单个函数在画布上绘制多个图像，可以实现在一个画布上同时展示多个图像。