前端工程师的画图日记

本文作者为 360 奇舞团前端开发工程师

作为一个前端，我先讲讲我是如何对前端产生兴趣的。当初接触 Web 页面开发时，发现网页这东西很神奇，在一个 Text 文本编辑器里敲上几行代码，改个扩展名，双击页面就展示出来了就是很有趣且很有成就感，一点点堆砌自己的代码，一个属性就可以改颜色改大小，可以做一个炫酷的特效等等。之前看到过一句话，说CSS就是网页版的亚洲四大邪术集合体。那么我今天的分享就从这里开始,介绍一下前端工程师如何画图。

在 Web 上，图形通常是通过浏览器绘制的。现代浏览器是一个复杂的系统，其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式，我总结了一下，大体上有4种。

1.传统的 HTML+CSS

这种方式通常用来呈现普通的 Web 网页。实际上，现代浏览器的 HTML、CSS 表现能力很强大，完全可以实现常规的图表展现，和一些有趣的特效及动画。那css如何作画呢？

我们先来看两张图，猜一猜哪个是css画的？

如果你猜两个都是，恭喜你，猜对啦～ 这两幅画都是出自css的手笔。

第一位古典女性肖像（下文中简称为贵妇），作者Diana使用HTML和CSS创作了受Flemish和巴洛克风格启发的肖像。这张图片的实现需要数千行代码，她有一个严格的规则，所有的元素都必须手动绘制，创作过程中不用SVG，只用Atom文本编辑器和Chrome开发者工具。这意味着她不依赖库、快捷键或某种可视化编辑器。也就是说，画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱，都是一行行代码从头敲出来的。曲线、光影、渐变，每个元素都相当复杂。
如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，让学计算机的同学觉得“别人写的这么艺术，一定是我的教科书打开方式不对”。
这个项目也一度登上了GitHub Trending排行榜第二名。

贵妇的睫毛部分代码实现：

第二张图片的水杯也有异曲同工之妙，整篇实现下来也是border-radius，box