用javascript画个狗狗
时间: 2024-01-07 18:18:04 浏览: 54
抱歉,作为一名AI语言模型,我无法直接为您提供可视化的绘图功能。但我可以给您提供一个基本的HTML和JavaScript代码示例,您可以使用它来绘制狗狗图片。
HTML代码:
```
<canvas id="myCanvas" width="400" height="400"></canvas>
```
JavaScript代码:
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 画狗头
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.fillStyle = "#FDB813";
ctx.fill();
// 画狗耳朵
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(180, 100);
ctx.lineTo(220, 100);
ctx.lineTo(250, 150);
ctx.fillStyle = "#FDB813";
ctx.fill();
ctx.beginPath();
ctx.moveTo(150, 250);
ctx.lineTo(180, 300);
ctx.lineTo(220, 300);
ctx.lineTo(250, 250);
ctx.fillStyle = "#FDB813";
ctx.fill();
// 画狗眼睛
ctx.beginPath();
ctx.arc(170, 180, 20, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(230, 180, 20, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.beginPath();
ctx.arc(170, 180, 10, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.beginPath();
ctx.arc(230, 180, 10, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();
// 画狗嘴巴
ctx.beginPath();
ctx.arc(200, 230, 40, 0, Math.PI);
ctx.lineWidth = 5;
ctx.strokeStyle = "#000000";
ctx.stroke();
// 画狗鼻子
ctx.beginPath();
ctx.arc(200, 200, 10, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();
```
这个代码将在画布上绘制一个黄色的狗头,两只耳朵,两只眼睛,一个嘴巴和一个鼻子。您可以根据自己的喜好和技能进行修改和改进。