在前端开发中，使用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
};
};
这个示例创建了一个简单的名片，包括姓名、职位、公司信息、联系方式和一个Logo。你可以根据需要调整文本内容、字体、颜色、位置等。同时，确保logo.png的路径是有效的，或者替换为你自己的Logo图像。