如何绘制一条优雅的圆弧线

最近在做的一个需求里需要绘制一条优雅的圆弧线，UE问我要不要切图？？伤害性不大，侮辱性极强！

UE给出的设计稿是下面这样的👇（看中间的那条白色圆弧线）

跟UE对设计稿的时候，UE问我这个圆弧要不要切图？~~嗯!? 这么简单的圆弧还切图，看不起谁呢？~~

👀之前也绘制过圆弧线，是使用画大圆的方式实现的。而这一次，我突然想到应该还有其他的办法也可以实现相同的效果吧。

于是查阅了一些资料，结合自身的经验总结了有如下几种画圆弧的方式：

画大圆

画大圆是最直接的实现方案了，也应该是很多开发者首先想到的方案之一了。

需要注意的地方是外部容器需要 overflow: hidden 用于隐藏圆形超过容器的部分。

我们常用 border-radius 画圆角，或者是画一个圆形。使用方法大概是这样的：

.demo {
    border-radius: 4px;
    /* or */
    border-radius: 50%;
}

而这里的定制 border-radius 使用了它的一项不常用的技能：为每一个单边设置圆角。

.demo {
    border-radius: 0 12px 12px 0 / 0 50% 50% 0;
}

这里不详细描述关于定制 border-radius 的内容，详细了解可以参考这篇文章：border-radius结合动画创建酷炫的效果.

从下方的演示效果看，越靠近两端，边框被压缩得越细，这与我们想要的效果还是有一定差别的。

关于 box-shadow 的方案，仔细对比下方的代码和定制border-radius 的代码可以发现，其实就是将白色边框的绘制方式从 border-right 换成了box-shadow。

更换以后解决了定制border-radius 方案中提到的边框压缩的问题，但是这个方案绘制出来的圆弧并不够圆润，并没有达到我所想要的效果。

这个方案还挺有趣的，通过旋转的方式从视觉效果上改变了圆角的大小。

但是我简单写了一个demo之后就发现，这个方案的产生的问题跟定制border-radius 方案产生的问题相同。

使用 svg 的方案无论从使用方法还是从展示效果上，跟 #画大圆效果是相同的。

而 canvas 的方案与 svg 方案实现方法也是类似的，同样是绘制一个大圆环，然后使用 overflow: hidden 隐藏掉了溢出的部分。也可以只绘制需要显示的一部分圆弧，只需要调整绘制圆弧的起始角度和终止角度即可。

方案罗列完毕之后就该选择方案了，从实际展示效果上进行筛选的话，可以达到操作效果的是画大圆、svg、canvas。

我当前这个需求所基于的场景时小程序，小程序对 svg 的兼容程度并不好，而 canvas 无论从操作难度还是性能上，跟纯css是无法相提并论的。

所以最终还是选择了画大圆的解决方案。~~绕了一圈又回来了~~

本文一共列举了 7 中绘制圆弧的方式，如果你还有更优的方案，或者对本文提出的方案有异议，请在评论区提出，谢谢。