使用canvas画出哭脸
时间: 2023-11-10 12:50:15 浏览: 122
好的,以下是使用 canvas 绘制哭脸的代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制哭脸</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 绘制圆形头部
context.beginPath();
context.arc(100, 100, 80, 0, 2 * Math.PI);
context.fillStyle = "#FDB813";
context.fill();
// 绘制眼睛
context.beginPath();
context.arc(60, 70, 10, 0, 2 * Math.PI);
context.arc(140, 70, 10, 0, 2 * Math.PI);
context.fillStyle = "#FFFFFF";
context.fill();
// 绘制黑色瞳孔
context.beginPath();
context.arc(60, 70, 5, 0, 2 * Math.PI);
context.arc(140, 70, 5, 0, 2 * Math.PI);
context.fillStyle = "#000000";
context.fill();
// 绘制嘴巴
context.beginPath();
context.moveTo(60, 130);
context.quadraticCurveTo(100, 150, 140, 130);
context.strokeStyle = "#000000";
context.lineWidth = 5;
context.stroke();
// 绘制眼泪
context.beginPath();
context.moveTo(80, 100);
context.quadraticCurveTo(90, 110, 100, 105);
context.quadraticCurveTo(110, 110, 120, 100);
context.strokeStyle = "#0000FF";
context.lineWidth = 2;
context.stroke();
</script>
</body>
</html>
```
效果如下:
![哭脸](https://cdn.jsdelivr.net/gh/Yousazoe/picgo-repo/img/20210914162213.png)
阅读全文