使用drawImage()在画布上绘制多个图象

要在画布上绘制多个图象，您可使用drawImage()方法屡次调用。每次调用时，您可以指定要绘制的图象，要绘制到画布上的位置和图象的大小。以下是一个示例，演示怎样在画布上绘制多个图象：

// 获得画布元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 创建图象对象
var image1 = new Image();
var image2 = new Image();
var image3 = new Image();
// 指定要绘制的图象源
image1.src = "image1.jpg";
image2.src = "image2.jpg";
image3.src = "image3.jpg";
// 图象加载完成后履行绘制
image1.onload = function() {
// 第一个图象绘制到画布上的位置和大小
ctx.drawImage(image1, 10, 10, 100, 100);
};
image2.onload = function() {
// 第二个图象绘制到画布上的位置和大小
ctx.drawImage(image2, 150, 10, 100, 100);
};
image3.onload = function() {
// 第三个图象绘制到画布上的位置和大小
ctx.drawImage(image3, 290, 10, 100, 100);
};

在上面的示例中，我们首先获得了一个画布元素并获得了2D上下文。然后，我们创建了三个图象对象，并为它们分配了图象源。接下来，我们使用onload事件处理程序，在图象加载完成后履行绘制。每一个图象都使用drawImage()方法绘制到画布上，通过指定绘制的位置和大小来控制它们在画布上的位置。