html绘制安卓小人

使用HTML绘制安卓小人的步骤说明

创建基础结构

使用<svg>标签定义画布，设置合适的width和height，并添加viewBox属性控制坐标范围。

<svg id="android-bot" width="200" height="200" viewBox="0 0 200 200">
<!-后续图形将添加在这里 –>
</svg>

绘制头部（圆形）

• 类型：<circle>
• 位置：圆心坐标 (100, 50)
• 半径：50
• 样式：绿色填充（#64B5F6），黑色描边（#000）

<circle cx="100" cy="50" r="50" fill="#64B5F6" stroke="#000" stroke-width="2"/>

绘制身体（矩形）

• 类型：<rect>
• 位置：x=75, y=80（头部下方）
• 尺寸：宽度 50，高度 40
• 样式：绿色填充，无描边

<rect x="75" y="80" width="50" height="40" fill="#64B5F6"/>

绘制四肢（线条）

• 类型：<line>
• 手臂：
  • 左臂：x1=75, y1=100 → x2=75, y2=60
  • 右臂：x1=125, y1=100 → x2=125, y2=60
• 腿部：
  • 左腿：x1=75, y1=120 → x2=75, y2=160
  • 右腿：x1=125, y1=120 → x2=125, y2=160
• 样式：黑色线条（stroke="#000"），宽度 4

<line x1="75" y1="100" x2="75" y2="60" stroke="#000" stroke-width="4"/>
<line x1="125" y1="100" x2="125" y2="60" stroke="#000" stroke-width="4"/>
<line x1="75" y1="120" x2="75" y2="160" stroke="#000" stroke-width="4"/>
<line x1="125" y1="120" x2="125" y2="160" stroke="#000" stroke-width="4"/>

绘制天线（矩形+圆形）

• 类型：<rect> + <circle>
• 位置：顶部中央
• 天线：矩形 x=95, y=20，宽度 10，高度 30
• 天线球：圆形 cx=105, cy=20，半径 5
• 样式：绿色填充，黑色描边

<rect x="95" y="20" width="10" height="30" fill="#64B5F6" stroke="#000" stroke-width="2"/>
<circle cx="105" cy="20" r="5" fill="#64B5F6" stroke="#000" stroke-width="2"/>

完整代码示例

<svg id="android-bot" width="200" height="200" viewBox="0 0 200 200">
  <!-头部 -->
  <circle cx="100" cy="50" r="50" fill="#64B5F6" stroke="#000" stroke-width="2"/>
  <!-身体 -->
  <rect x="75" y="80" width="50" height="40" fill="#64B5F6"/>
  <!-四肢 -->
  <line x1="75" y1="100" x2="75" y2="60" stroke="#000" stroke-width="4"/>
  <line x1="125" y1="100" x2="125" y2="60" stroke="#000" stroke-width="4"/>
  <line x1="75" y1="120" x2="75" y2="160" stroke="#000" stroke-width="4"/>
  <line x1="125" y1="120" x2="125" y2="160" stroke="#000" stroke-width="4"/>
  <!-天线 -->
  <rect x="95" y="20" width="10" height="30" fill="#64B5F6" stroke="#000" stroke-width="2"/>
  <circle cx="105" cy="20" r="5" fill="#64B5F6" stroke="#000" stroke-width="2"/>
</svg>

相关问题与解答

问题1：如何修改安卓小人的颜色？

解答：
修改SVG元素中的fill属性即可，将绿色#64B5F6替换为其他颜色（如红色#FF0000），所有图形会自动更新颜色。

1. 整体缩放：修改<svg>标签的width和height属性（如改为width="300"）。
2. 单独调整：修改图形元素的尺寸参数（如头部半径r、身体width和height等），需保持比例避免