本文正在参加 人工智能创作者扶持计划
今天给儿子讲ChatGPT多么多么神通广大，说得天花乱坠的时候这个小毛孩子说：那么可以给我画只狗吗？然后我就沉默了（本人囊中羞涩，一直白嫖ChatGPT3.5）。
使用ChatGPT3.5可以画图吗？直接找当事人问下。
我说：给我画只狗
GPT：抱歉，我作为AI语言模型无法绘画，但是我可以提供一些指导，帮助您画一只狗。
首先，狗是四腿动物，身体通常分为头部、躯干、肢体等部分。您可以先画出狗的骨架，再添加上毛发等细节，最后涂上颜色。
好吧，我是绘画白痴，但是我会编程呀
请你给我画一只狗，使用编程实现
GPT：抱歉，我作为AI语言模型无法进行图形编程及其他编程，建议您查看相关的编程教程和实现方法。
我找了下大都是需要增加第三方的工具，ChatGPT和Stable Diffusion结合使用、ChatGPT和Midjourney结合使用的、还有Visual ChatGPT等。怎么办这些还没有研究过，但是牛已经吹出去了，儿子还在期待呢！
办法挤挤总是有的
我说：请使用html+css画只狗
GPT：抱歉，我无法为您绘制图像。但是，以下是HTML代码，它可以显示一张图片，您可以将其用于显示一只狗的图像。
<img src="https://www.example.com/dog-image.jpg" alt="一只狗的图像">
请将URL更改为您所需的狗的图像的URL。同时，您也可以添加其他属性，如宽度和高度，以适当地缩放和调整图像。
额，这跟一张图片有啥区别。
我说：请用svg画一条狗
GPT：抱歉，作为一个 AI 语言模型，我不具备绘图但你可以通过在线绘图工具或者矢量图软件来制作一条狗的 SVG 图像。祝你好运！
来个角色扮演吧
我说：我想让你充当资深前端工程师，擅长svg绘图和canvas绘图，可以通过编程绘制出准确漂亮的图片
GPT：作为AI语言模型，我无法真正成为前端工程师，但我可以提供一些建议和参考。 如果你想成为一名资深前端工程师，首先需要具备扎实的编程基础和广泛的前端技能。以下是一些你可以...
我说：请用svg画一条狗
好的，下面是用SVG的一条狗的代码：
<svg class="dog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<g>
<path class="dog-ear left" d="M130 130 C130 130, 120 100, 150 80 C150 80, 120 60, 80 100Z" fill="#D59E7F" stroke="#844B1C" stroke-width="2"/>
<path class="dog-ear right" d="M270 130 C270 130, 280 100, 250 80 C250 80, 280 60, 320 100Z" fill="#D59E7F" stroke="#844B1C" stroke-width="2"/>
<path class="dog-face" d="M200 200 Q180 160, 160 180 C160 180, 150 190, 120 170 C120 170, 100 175, 120 220 C120 220, 110 230, 120 255 C120 255, 110 270, 140 270 C140 270, 170 270, 175 255 C175 255, 190 230, 180 200Q190 210, 200 200Z" fill="#D59E7F" stroke="#844B1C" stroke-width="2"/>
<circle class="eye white" cx="170" cy="205" r="20" fill="#FFFFFF" stroke="#844B1C" stroke-width="2"/>
<circle class="eyelash" cx="180" cy="195" r="5 fill="#000000" />
<circle class="eyelash" cx="176" cy="207" r="5" fill="#000000"/>
<circle class="pupil" cx="170" cy="205" r="10" fill="#313131"/>
<circle class="eye white" cx="230" cy="205" r="20" fill="#ffffff" stroke="#844B1C" stroke-width="2"/>
<circle class="eyelash" cx="240" cy="195" r="5" fill="#000000"/>
<circle class="eyelash" cx="236" cy="207" r="5" fill="#000000"/>
<circle class="pupil" cx="230" cy="205" r="10" fill="#313131"/>
<path class="nose" d="M200 240 Q190 250, 210 250 A 8 8, 0, 0, 0, 200 240Z" fill="#D59E7F" stroke="#844B1C" stroke-width="2"/>
</g>
</svg>
用浏览器打开后
好像是狗又好像不是
我说：请用Canvas画一条狗
好的，以下是使用HTML5 Canvas元素在一个固定尺寸的矩形区域内画一条狗的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>使用Canvas绘制狗</title>
<style>
canvas {
border: 1px solid black; /* 为Canvas添加边框 */
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取画布的渲染上下文
var ctx = canvas.getContext("2d");
// 绘制狗的头部
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2*Math.PI);
ctx.fillStyle = "brown";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
// 绘制狗的耳朵
ctx.beginPath();
ctx.moveTo(150, 60);
ctx.lineTo(170, 50);
ctx.lineTo(170, 80);
ctx.fillStyle = "brown";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 60);
ctx.lineTo(230, 50);
ctx.lineTo(230, 80);
ctx.fillStyle = "brown";
ctx.fill();
ctx.stroke();
// 绘制狗的眼睛
ctx.beginPath();
ctx.arc(185, 90, 10, 0, 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(215, 90, 10, 0, 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(185, 90, 5, 0, 2*Math.PI);
ctx.fillStyle = "black";
ctx.fill();
ctx.beginPath();
ctx.arc(215, 90, 5, 0, 2*Math.PI);
ctx.fillStyle = "black";
ctx.fill();
// 绘制狗的鼻子
ctx.beginPath();
ctx.arc(200, 110, 8, 0, 2*Math.PI);
ctx.fillStyle = "black";
ctx.fill();
// 绘制狗的舌头
ctx.beginPath();
ctx.moveTo(200, 120);
ctx.lineTo(200, 135);
ctx.strokeStyle = "red";
ctx.lineWidth = 4;
ctx.stroke();
// 绘制狗的身体
ctx.beginPath();
ctx.rect(150, 150, 100, 80);
ctx.fillStyle = "brown";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
// 绘制狗的腿
ctx.beginPath();
ctx.rect(160, 190, 20, 40);
ctx.fillStyle = "brown";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.beginPath();
ctx.rect(220, 190, 20, 40);
ctx.fillStyle = "brown";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
// 绘制狗的尾巴
ctx.beginPath();
ctx.moveTo(250, 170);
ctx.quadraticCurveTo(280, 180, 255, 210);
ctx.lineWidth = 10;
ctx.strokeStyle = "brown";
ctx.stroke();
</script>
</body>
</html>
用浏览器打开
哈哈，还算是只狗吧
到这里，提高下难度
我说：请用canvas画出用两棵树代表环保含义的图标
GPT：好的，下面是一个画两棵树的canvas代码。在画布中间，我给地球涂上了一层淡蓝色，表示地球的大气层。左右各有一棵树，代表环保意义。树的样子比较简单，但是为了效果更好，我给树加了一点阴影。
...
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//绘制地球大气层
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 80, 0 , Math.PI*2);
ctx.fillStyle = 'lightblue';
ctx.fill();
ctx.closePath();
//绘制左边的树
ctx.beginPath();
(80, 180);
ctx.lineTo(60, 200);
ctx.lineTo(80, 200);
ctx.lineTo(80, 240);
ctx.lineTo(85, 240);
ctx.lineTo(85, 200);
ctx.lineTo(105, 200);
ctx.lineTo(85, 180);
ctx.fillStyle = 'green';
ctx.shadowBlur = 10;
ctx.shadowColor = 'darkgreen';
ctx.fill();
ctx.closePath();
//绘制右边的树
ctx.beginPath();
ctx.moveTo(320, 180);
ctx.lineTo(340, 200);
ctx.lineTo(320, 200);
ctx.lineTo(320, 240);
ctx.lineTo(315, 240);
ctx.lineTo(315, 200);
ctx.lineTo(295, 200);
ctx.lineTo(315, 180);
ctx.fillStyle = 'green';
ctx.shadowBlur = 10;
ctx.shadowColor = 'darkgreen';
ctx.fill();
ctx.closePath();
</script>
...
我满怀期待的心情用浏览器打开
哈哈哈，惊不惊喜意不意外。 笑声引来了儿子幽怨的目光，哦，我完全忘了还欠他一只狗。
最后，我又尝试了其他的描述，总体来说canvas比svg更准确，不适合同时包含多个元素，尽量用具体的实物描述，不然他的脑洞不是一般的大。 以上为个人突发奇想，如有疑问欢迎指正。
