js在图片上添加文字

<!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>
        // 获取Canvas元素和绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 创建Image对象
        const img = new Image();
        img.src = 'path/to/your/image.jpg'; // 替换为你的图片路径

        img.onload = function() {
            // 绘制图片到Canvas
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            // 设置文字样式
            ctx.font = '30px Arial';
            ctx.fillStyle = 'white';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // 在图片上添加文字
            const text = 'Hello, World!';
            const x = canvas.width / 2;
            const y = canvas.height / 2;
            ctx.fillText(text, x, y);
        };
    </script>
</body>
</html>