使用 CSS 中的圆圈绘制荷马·辛普森

CSS 绘图通常由形状组合而成，最终呈现出矢量效果的图像。像荷马·辛普森这样的卡通人物并不属于矢量图像，这使得用 CSS 绘制它变得颇具挑战性。

最重要的是，这幅漫画是CodePen 挑战的一部分，该挑战包括构建一些限制我们自己形状的东西：圆形，这为混合增加了一个有趣的限制。

因此，本文不会是一篇常规的关于如何在 CSS 上绘图的文章。这也不是正确的处理方式——如果真有所谓的正确方式的话——而是一种不同的（且有趣的）方法来解决这个问题。

现在你可能会问“你怎样只用圆圈来画荷马·辛普森？ ”这是一个很好的问题。

第一步是选择一张图片。我并不是凭记忆画荷马·辛普森的，而是用一张背景图作为指导，在上面描线。

诀窍在于每条线使用两个圆圈：一个圆圈用来画线，另一个圆圈用来裁剪线。一个圆圈套着另一个圆圈：

• 内部的圆用于绘制线条。它有边框，并且绝对定位在另一个圆的内部。
• 外部的圆用于裁剪内部的圆。它没有边框，没有填充，只有一个overflow: hidden。

像这样：

翻译成代码如下：

<div id="part-of-Homer-face">
  <div></div>
</div>

div {  
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: absolute;
}

div > div {
  border: 3px solid black;
}

/* exterior circle*/
#part-of-Homer-face {
  top: ...px;
  left: ...px;
}

/* interior circle */
#part-of-Homer-face > div {
  top: ...px;
  left: ...px;
}

下一步是将图像分解成各种形状。我知道我们只用到了圆形，所以更多的是把它分解成圆形和非圆形。

因此，让我们关注荷马辛普森的特征，这些特征大多是圆圈：眼睛、耳朵、鼻尖、头顶等。我喜欢用眼睛作为起点，因为它们很容易画，而且它们已经赋予了绘画个性。

添加第一个裁剪圆圈后，我们得到如下结果：

您的下一个想法可能是“那幅画已经非常酷了- 谢谢！ -但是直线怎么样？Homer 并不全是曲线，到目前为止它只是一堆圆圈”。

回答这个问题：直线有点棘手，但也没那么复杂。如果你有一个很大的圆，但只能看到它的一小部分，它真的看起来像一个圆吗？

如果你把圆圈做得足够大，只显示其中一部分，你可能会看到一点弯曲，但总的来说，它看起来就像一条直线。我就是这么做的。

加上这些“直线”之后，我们的荷马看起来更像荷马了：

最后，我们需要添加线条来连接所有内容。这可能是最棘手的部分，因为 CSS 上的线条不会完全匹配，它们之间会留下空隙。

如果操作正确，在 100% 缩放时你不会注意到连接；但是，如果放大，你会注意到它们远非完美。你还会注意到 CSS 绘图的缩放效果非常好。

结果可以在这里看到（鼠标悬停在上面可以显示所有圆圈，但要注意它可能看起来有点令人毛骨悚然）：

再次强调，这并非 CSS 绘图的最佳方式，但它也有一些优势：它使用了非常标准的 HTML 和 CSS。没有 transforms、没有 clip-paths、没有渐变、没有花哨的 CSS3……只有 borders 和overflow: hidden。这意味着它在大多数浏览器中看起来都很相似：

...哇噢！

如果你喜欢画 CSS 和/或《辛普森一家》，这里有一个用 CSS 和 HTML 绘制的辛普森一家人物的合集。几个月前我开始画这些人物，有人建议我写一篇关于我是如何画的的文章。我花了很长时间才完成——而且可能不是他们想要的那种——但我希望你喜欢。

注意：荷马·辛普森的角色和设计受版权保护，并且仅在本帖中用于研究和教育目的的“合理使用”。