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
    评论
js代码 [removed] ;(function() { 'use strict'; var c = document.getElementById('c'); var ctx = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var fl = 1000; function prj(obj) { var cz = obj.z fl; if(cz === 0) return; var scl = fl / cz; obj.p.x = cx obj.x * scl; obj.p.y = cy obj.y * scl; obj.s = scl; } var P = function(x, y, z) { this.x = x; this.y = y; this.z = z; this.s = 1; this.cl = 0; this.p = { x: 0, y: 0 }; }; P.prototype = { constructor: P, update: function() { this.z -= 30; }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = 'hsla(' this.cl ', 100%, 50%, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; var M = function(x, y, z) { this.list = []; this.max = 100; this.x = x; this.y = y; this.z = z; this.s = 1; this.p = { x: 0, y: 0 }; this.ax = Math.random() * (Math.PI * 2); this.ay = Math.random() * (Math.PI * 2); this.rx = Math.random() * 100; this.ry = Math.random() * 100; this.cl = Math.random() * 360; this.cls = Math.random(); }; M.prototype = { constructor: M, update: function() { this.cl = this.cls; this.ax = Math.random() * 0.1 - 0.02; this.ay = Math.random() * 0.1 - 0.02; this.x = Math.cos(this.ax) * 100; this.y = Math.sin(this.ay) * 100; this.z = 10; if(this.z > fl) this.z = fl; if(this.list.length < this.max) { if(Math.random() * 100 < 50) { var pp = new P(this.x, this.y, this.z); pp.cl = this.cl; this.list.push(pp); } } else { var pp = this.list.shift(); pp.x = this.x; pp.y = this.y; pp.z = this.z; pp.cl = this.cl; this.list.push(pp); } }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.fillStyle = 'green'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; function update(mv, list) { for(var i = 0; i < list.length; i ) { var p = list[i]; p.update(); prj(p); p.render(ctx); } for(var i = list.length-1; i >= 0; i--) { var p = list[i]; if(p.z <= -fl) continue; if(i === list.length - 1) { ctx.lineWidth = Math.random(); ctx.strokeStyle = 'hsl(' mv.cl ', 100%, 50%)'; ctx.beginPath(); ctx.moveTo(p.p.x, p.p.y); } else { ctx.lineTo(p.p.x, p.p.y); } } ctx.stroke(); } var ms = []; for(var i = 0; i < 10; i ) { ms.push(new M( Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200)); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for(var i = 0; i < ms.length; i ) { var m = ms[i]; m.update(); prj(m); update(m, m.list); } }); })(); [removed] 这是一款基于HTML5 Canvas绘制的炫酷3D线条延伸动画特效,多彩颜色变幻,非常漂亮!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值