用canvas画一只猪
时间: 2023-05-31 22:05:15 浏览: 47
抱歉,作为一个AI语言模型,我无法直接绘制画作。但是,我可以为您提供一些参考代码,您可以尝试使用它来画一只猪。
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Pig</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// draw pig
ctx.fillStyle = "#f0d4c4"; // body color
ctx.beginPath();
ctx.arc(200, 200, 100, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#e0b8a0"; // head color
ctx.beginPath();
ctx.arc(120, 200, 70, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#e0b8a0"; // ear color
ctx.beginPath();
ctx.arc(70, 150, 30, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(170, 150, 30, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "black"; // eyes color
ctx.beginPath();
ctx.arc(100, 190, 15, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(140, 190, 15, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "pink"; // nose color
ctx.beginPath();
ctx.arc(120, 230, 20, 0, Math.PI * 2);
ctx.fill();
ctx.lineWidth = 5; // mouth
ctx.beginPath();
ctx.arc(120, 240, 30, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.stroke();
ctx.fillStyle = "#e0b8a0"; // leg color
ctx.fillRect(100, 280, 40, 80);
ctx.fillRect(160, 280, 40, 80);
</script>
</body>
</html>
```
这段代码通过 canvas 元素和 JavaScript 绘制了一只猪的图像。您可以将代码复制到 HTML 文件中并打开浏览器来查看效果。