キャンバスに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コンテキストを取得します。次に、3つのイメージオブジェクトを作成し、イメージソースを割り当てます。さらに、イメージの読み込みが完了した後に描画を実行するためのonloadイベントハンドラーを使用します。キャンバス上に各イメージをdrawImage()メソッドを使用して描画し、描画する位置と大きさを指定することでキャンバス上での位置を制御します。