html5 canvas实现中间粗两边细的线条html5 canvas实现中间粗两边细的线条..............

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="background: black"></canvas>
<script>
    let canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');
    let x = canvas.width / 2;
    let y = canvas.height / 8;

    /**
     * 实现中间粗两边细的线条
     * @param {Array} translate - 重新映射画布的位置
     * @param {Number}  radiusX - 椭圆长轴的半径
     * @param {Number}  radiusY - 椭圆短轴的半径
     * @param {Number}       r0 - 开始圆的半径（渐变圆）
     * @param {Number}  opacity - 渐变色透明度
     **/
    function ellipse({translate = [], radiusX = 0, radiusY = 0, r0 = 50, opacity = 0}) {
        ctx.save();
        ctx.beginPath();
        ctx.translate(...translate);
        ctx.ellipse(0, 0, radiusX, radiusY, 0, 0, Math.PI * 2);
        let grd = ctx.createRadialGradient(0, 0, r0, 0, 0, 1);   // 放射状/圆形渐变
        grd.addColorStop(0, `rgba(1,174,229,${opacity})`);
        grd.addColorStop(1, "rgba(1,174,229,1)");
        ctx.fillStyle = grd;
        ctx.fill();
        ctx.restore();
    }

    ellipse({radiusX: 80, radiusY: 50, translate: [x, y], opacity: 0.5});
    ellipse({radiusX: 50, radiusY: 25, translate: [x, y + 100], opacity: 0});
    ellipse({radiusX: 50, radiusY: 10, translate: [x, y + 150], opacity: 0, r0: 40});
    ellipse({radiusX: 50, radiusY: 1, translate: [x, y + 200], opacity: 0});
    ellipse({radiusX: 50, radiusY: 1, translate: [x, y + 250], opacity: 0, r0: 30})
</script>
</body>
</html>