"```markdown
使用HTML5绘制经典“旺仔”头像
在这篇文章中，我们将使用HTML5的<canvas>元素来绘制经典的“旺仔”头像。通过JavaScript，我们可以在画布上绘制出图像的基本元素。
创建HTML结构
首先，我们需要设置HTML结构，包含一个<canvas>元素和一些基本样式。
<!DOCTYPE html>
<html lang=\"zh\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>旺仔头像绘制</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id=\"wangzai\" width=\"400\" height=\"400\"></canvas>
<script src=\"script.js\"></script>
</body>
</html>
绘制头像
接下来，我们在script.js文件中编写JavaScript代码来绘制头像。
const canvas = document.getElementById('wangzai');
const ctx = canvas.getContext('2d');
// 绘制脸部
ctx.fillStyle = '#ffcc00'; // 肤色
ctx.beginPath();
ctx.arc(200, 200, 100, 0, Math.PI * 2); // 圆形
ctx.fill();
// 绘制眼睛
ctx.fillStyle = '#fff'; // 眼白
ctx.beginPath();
ctx.arc(160, 180, 15, 0, Math.PI * 2); // 左眼
ctx.fill();
ctx.beginPath();
ctx.arc(240, 180, 15, 0, Math.PI * 2); // 右眼
ctx.fill();
// 绘制眼球
ctx.fillStyle = '#000'; // 黑色
ctx.beginPath();
ctx.arc(160, 180, 7, 0, Math.PI * 2); // 左眼球
ctx.fill();
ctx.beginPath();
ctx.arc(240, 180, 7, 0, Math.PI * 2); // 右眼球
ctx.fill();
// 绘制嘴巴
ctx.fillStyle = '#ff0000'; // 红色
ctx.beginPath();
ctx.arc(200, 230, 30, 0, Math.PI); // 嘴巴
ctx.fill();
// 绘制舌头
ctx.fillStyle = '#ff6699'; // 舌头颜色
ctx.beginPath();
ctx.arc(200, 230, 15, Math.PI, 0); // 舌头
ctx.fill();
// 绘制耳朵
ctx.fillStyle = '#ffcc00'; // 肤色
ctx.beginPath();
ctx.arc(100, 200, 20, 0, Math.PI * 2); // 左耳
ctx.fill();
ctx.beginPath();
ctx.arc(300, 200, 20, 0, Math.PI * 2); // 右耳
ctx.fill();
运行代码
将以上HTML和JavaScript代码放在合适的文件中后，打开HTML文件，您将看到绘制的“旺仔”头像。通过调整颜色和位置，可以更加精细化图像，使其更接近经典形象。
总结
本文介绍了如何使用HTML5的<canvas>元素和JavaScript绘制经典“旺仔”头像。通过简单的图形绘制和颜色填充，您可以创建出有趣的图像。可以根据需要继续扩展和美化这个头像，探索更多的绘图功能。
