Prompt使用GPT来生成logo图标
作者：庄泽峰 / 2023-12-11 10:29
Prompt 1：Hello，GPT，请你用html5+CSS3来实现：这几个字母“Phon”，深色背景，字体白色，宽高在300px
等GPT生成页面代码后，再提示Prompt 2：我想将这个logo生成为PNG图片，然后得到下面完整的生成logo图标并可下载的代码：
<!DOCTYPE html>
<html>
<head>
<title>Phon Logo</title>
<style>
body {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.logo {
width: 300px;
height: 300px;
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
font-size: 100px;
color: #fff;
}
</style>
</head>
<body>
<div class="logo">Phon</div>
<script>
// 获取Canvas元素
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
const ctx = canvas.getContext('2d');
// 绘制logo到Canvas上
const logo = document.querySelector('.logo');
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '100px Arial, sans-serif';
ctx.fillStyle = '#fff';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Phon', canvas.width / 2, canvas.height / 2);
// 创建一个新的Image对象，并将Canvas内容绘制到Image上
const image = new Image();
image.src = canvas.toDataURL();
// 创建一个下载链接，将Image保存为PNG图片
const link = document.createElement('a');
link.href = image.src;
link.download = 'phon_logo.png';
link.innerHTML = 'Download Logo';
document.body.appendChild(link);
</script>
</body>
</html>
如果想将logo图标生成圆角的，可以使用Prompt 3 提示：我觉得这个logo生成 border - radius : 10% 的圆角会更好看，我需要这样的图片
