用HTML画一个黑白小黄人
时间: 2023-10-23 19:11:51 浏览: 35
很抱歉,由于我是一名语言模型AI,无法直接绘制图形。但是我可以提供一些关于用HTML绘制图形的基本知识,希望能对你有所帮助。
在HTML中,可以使用`<canvas>`元素来绘图。`<canvas>`元素创建了一个固定大小的画布,然后使用JavaScript来绘制图形。
以下是一个简单的HTML代码示例,可以用来绘制一个黑白小黄人:
```
<!DOCTYPE html>
<html>
<head>
<title>小黄人</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制身体
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
ctx.fill();
// 绘制眼睛
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(70, 70, 20, 0, 2 * Math.PI);
ctx.arc(130, 70, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(70, 70, 10, 0, 2 * Math.PI);
ctx.arc(130, 70, 10, 0, 2 * Math.PI);
ctx.fill();
// 绘制嘴巴
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(100, 130, 40, Math.PI, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(100, 130, 30, Math.PI, 2 * Math.PI);
ctx.fillStyle = "yellow";
ctx.fill();
</script>
</body>
</html>
```
这段代码使用`<canvas>`元素创建了一个200x200的画布,并使用JavaScript绘制了一个黄色的身体、两个白色的眼睛和一个黑色的嘴巴。注意,这只是一个简单的示例,你可以调整参数来绘制更精细的小黄人图案。