console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw Cursive Font</title>
    <style>
    </style>
</head>

<body>
    <canvas id="myCanvas" width="120" height="40"></canvas>
<button onclick="convertToBase64()">将画布内容转换为Base64</button>
    <script>
        // 获取canvas元素和其上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置字体样式为cursive
        ctx.font = '30px cursive';

        // 设置填充颜色（这里设置为黑色，可根据需求修改）
        ctx.fillStyle = 'white';

        // 在canvas上绘制文本
        ctx.fillText('云上筑', 0, 30);

        function convertToBase64() {
            const base64Data = canvas.toDataURL();
            console.log(base64Data);

            // 这里可以根据需求对获取到的base64数据进行进一步处理
            // 比如发送给后端、在页面的其他地方使用等

            // 示例：将base64数据设置为一个隐藏的img元素的src属性，以便在页面上显示图像（虽然这里是文本绘制的内容）
            const imgElement = document.createElement('img');
            imgElement.src = base64Data;
            imgElement.style.display = 'none';
            document.body.appendChild(imgElement);
        }
    </script>
</body>

</html>