实现各种角度的圆（半圆、1/3圆、1/4圆...）

通过css实现整圆、半圆、1/4圆

整圆和半圆都可以使用border-radius实现，1/4圆可以借助设置盒子边框实现，留一个边设置颜色，其余三边设置为透明颜色。

.box1 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: green;
}

.box2 {
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
    background-color: green;
}

.box3 {
    border-radius: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left-color: green;
    // border-right-color: green;
}

通过svg实现任意角度的扇形圆

当然是有需求才会去实现，之前也没有仔细去研究过svg，但是遇到了个转盘抽奖的开发任务，查了很多资料后发现通过svg实现是比较简单的方法，下面就是需要的大体效果，要做的就是实现灰色框里的扇形圆，并且角度会变化。

实现代码如下：

<div class="box box5">
    <svg
        width="100%"
        height="100%"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            :d="`
                M${x1} ${y}
                L100 100
                L${x2} ${y}
                A100 100 0 0 0 ${x1} ${y}
            `"
            style="
                fill: rgba(224, 32, 32, 0.2);
                stroke: #e02020;
                stroke-width: 1;
            "
        />
    </svg>
</div>

data() {
    return {
        angle: 60, // 实现任意角度扇形圆只需要改变angle的值
    };
},
computed: {
    x1() {
        const deg = this.angle / 2;
        const radian = deg * 0.017453293;
        // 因为js三角函数运算中使用的是弧度，所以需要将角度转换为弧度
        return 100 - Math.sin(radian) * 100;
    },
    y() {
        const deg = this.angle / 2;
        const radian = deg * 0.017453293;
        return 101 - Math.cos(radian) * 100;
    },
    x2() {
        const deg = this.angle / 2;
        const radian = deg * 0.017453293;
        return 100 + Math.sin(radian) * 100;
    },
},

按照上图的条件，想要通过SVG画圆弧，需要知道A、B两点的坐标，如果要画扇形圆的角度为60°，那么∠a = 30°，OA和OB都是圆的半径为100px，那么AC = BC = OA * sin(a)，OC = OA * cos(a)，则A点坐标就为(100 - AC, 100 - OC)，B点坐标就为(100 + BC, 100 - OC)，则扇形圆路径就是AOBA，B到A是圆弧。

M${x1} ${y} // (x1, y)为起点
L100 100 // 画线到 (100，100)
L${x2} ${y} // 画线到 (x2，y)
A100 100 0 0 0 ${x1} ${y} // 画弧线到 (x1, y)

指令A的值为(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

A (绝对) a (相对)， 本例中使用绝对路径

• rx ry 是椭圆的两个半轴的长度。
• x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
• large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
• sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
• x y 是圆弧终点的坐标。