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);
    }

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值