canvas 指定路径流光效果

给个canvas style宽高 和标题的宽高一样  一定要给style 宽高 否则 拉伸屏幕流光位置就变了

 function drawCanvas4() {
        let c = document.getElementById("myCanvas4");
        let context = c.getContext("2d");

        let width = 1920;//画布宽度
        let height = 80;//画布高度


        var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var designWidth = 1920; // 设计稿的宽度 
        var cssPixelRatio = browserWidth / designWidth; // CSS像素与设计稿像素的比例
        let fPoints = [{ x: 440, y: 30, r: 1.5 }];//初始点坐标
        function drawCircle() {
            for (let i = 0; i < fPoints.length; i++) {
                context.lineWidth = 0; //线条宽度-空心圆
                // context.strokeStyle = 'rgba(2, 179, 253,0.02)'; //颜色   
                context.shadowBlur = 0;// 设置或返回用于阴影的颜色
                context.shadowColor = 'rgba(2, 179, 253,1)';     // 设置或返回用于阴影的模糊级别
                context.fillStyle = 'rgba(2, 179, 253,1)';//填充颜色-实心圆
                context.fill();//画实心圆
                context.beginPath();
                context.arc(fPoints[i].x, fPoints[i].y, fPoints[i].r, 0, Math.PI * 2);
                context.closePath();
            }

            if (fPoints[0].x < 640) {
                fPoints[0].x += 2;
                // fPoints[0].y -= 1.15;
            } else if (fPoints[0].x < 712) {
                fPoints[0].y += 1;
                fPoints[0].x += 2;
            } else if (fPoints[0].x < 1208) {

                fPoints[0].x += 2;
            }
            else if (fPoints[0].x < 1278) {
                fPoints[0].y -= 1;
                fPoints[0].x += 2;
            }
            else if (fPoints[0].x < 1550) {
                fPoints[0].x += 2;
            }
            else if (fPoints[0].x >= 1550) {
                fPoints = [{ x: 440, y: 30, r: 1.5 }];//初始点坐标
            }


        }

        function render() {
            //默认值为source-over
            let prev = context.globalCompositeOperation;
            //只显示canvas上原图像的重叠部分
            context.globalCompositeOperation = 'destination-in';
            //设置主canvas的绘制透明度
            context.globalAlpha = 0.9;
            //这一步目的是将canvas上的图像变的透明
            context.fillRect(0, 0, width, height);
            //在原图像上重叠新图像
            context.globalCompositeOperation = prev;
            //在主canvas上画新圆
            drawCircle();
            if (width !== 0) {
                //在动画没有结束前，递归渲染
                window.requestAnimationFrame(render);
            }
        }
        window.requestAnimationFrame(render);
    }