使用canvas将两张图片合成一张图片

在前端开发中，使用 HTML5 的 <canvas> 元素可以方便地将两张图片合成一张图片。以下是一个简单的示例，说明如何完成这个任务：

HTML 结构：

首先，在 HTML 文件中创建一个 <canvas> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片合成</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript 代码：

在 script.js 文件中，编写 JavaScript 代码来加载两张图片，并将它们绘制到 <canvas> 上。

window.onload = function() {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 加载第一张图片
    const image1 = new Image();
    image1.src = 'path_to_your_first_image.jpg'; // 替换为你的图片路径
    image1.onload = function() {
        // 绘制第一张图片到 canvas 上
        ctx.drawImage(image1, 0, 0, canvas.width / 2, canvas.height);

        // 加载第二张图片
        const image2 = new Image();
        image2.src = 'path_to_your_second_image.jpg'; // 替换为你的图片路径
        image2.onload = function() {
            // 绘制第二张图片到 canvas 上（在第一张图片的右侧）
            ctx.drawImage(image2, canvas.width / 2, 0, canvas.width / 2, canvas.height);
        };
    };
};