使用canvas生成一张名片

在前端开发中，使用HTML5的<canvas>元素可以动态地生成图像。以下是一个简单的示例，展示如何使用<canvas>来生成一张名片：

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名片生成器</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="businessCard" width="600" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js文件)：

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

    // 设置背景颜色
    ctx.fillStyle = '#f0f0f0';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 添加边框
    ctx.strokeStyle = '#000';
    ctx.strokeRect(0, 0, canvas.width, canvas.height);

    // 添加姓名
    ctx.font = '30px Arial';
    ctx.fillStyle = '#333';
    ctx.textAlign = 'center';
    ctx.fillText('张三', canvas.width / 2, 60);

    // 添加职位
    ctx.font = '20px Arial';
    ctx.fillText('前端开发工程师', canvas.width / 2, 100);

    // 添加公司信息
    ctx.font = '18px Arial';
    ctx.fillText('XXX科技有限公司', canvas.width / 2, 140);

    // 添加联系方式
    ctx.font = '16px Arial';
    ctx.fillText('电话: 123-456-7890', 50, 200);
    ctx.fillText('邮箱: zhangsan@example.com', 50, 225);

    // 添加Logo (假设你有一个logo.png图片)
    const image = new Image();
    image.src = 'logo.png'; // 确保此路径指向有效的图像文件
    image.onload = function() {
        ctx.drawImage(image, canvas.width - 100, 10, 80, 80); // 在右上角绘制Logo
    };
};