知乎登录页面背景效果模拟(1)

hulan 发布于 08-01 20:22 浏览:36 类型:原创 - 随笔 分类:HTML/CSS - comment 作者原创 版权保护
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin: 0;
            padding: 0;
        }
            body{
                overflow: hidden;
            }
            #myCanvas{
                border: 1px;
                background-color: lavenderblush;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
    </body>
    <script type="text/javascript">
        //获取窗口宽高
        var w = window.innerWidth;
        var h = window.innerHeight;

        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        //设置画布宽高与窗口宽高一样
        canvas.width = w;
        canvas.height = h;
        //随机数函数
        function fnRandom(min,max){
            return parseInt((max-min)*Math.random()+min+1)
        }
        function Round(){
            this.r = fnRandom(10,30);
            this.diam = this.r*2;
            //随机位置
            var x = fnRandom(0,canvas.width - this.r);
            this.x = x<this.r?this.r:x;
            var y = fnRandom(0,canvas.height-this.r);
            this.y = y<this.r?this.r:y
            //随机速度
            var speed = fnRandom(2,4)/10
            this.speedX = fnRandom(0,4)>2?speed:-speed;
            this.speedY = fnRandom(0,4)>2?speed:-speed;
            //颜色

            this.color = "orange";
        }
        Round.prototype.draw = function(){
            //绘制函数
            ctx.fillStyle = this.color;
            ctx.beginPath()
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
        }
        Round.prototype.move = function(){
            this.x+=this.speedX;
            if(this.x>canvas.width-this.r){
//              this.speedX*=-1;
            this.x=this.r

            }else if(this.x<this.r){
                this.x=canvas.width-this.r
            }
            this.y+=this.speedY;
            if(this.y>canvas.height-this.r){
//              this.speedY*=-1;
                this.y=this.r
            }else if(this.y<this.r){
                this.y=canvas.height-this.r
            }
        }
        //使用Round
        var allRound = [];
        function initRound(){
            //初始化30个圆形对象,放到数组中
            for(var i = 0 ; i<30;i++){
                var obj = new Round();
                obj.draw();
                obj.move();
                allRound.push(obj);

            }
        }
        initRound();
        var dxdy = []
        function roundMove(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            //遍历所有的圆形对象,让对象自己重绘,移动
            for (var i = 0 ;i <allRound.length;i++) {
                var round = allRound[i];
                round.draw();
                round.move();

                dxdy[i]={
                    dx:round.x,
                    dy:round.y
                };
                var dx = dxdy[i].dx;
                var dy =dxdy[i].dy;
                for (var j=0;j<i;j++) {
                    var sx = dxdy[j].dx;
                    var sy = dxdy[j].dy;
                    l = Math.sqrt((dx-sx)*(dx-sx)+(dy-sy)*(dy-sy));
                    var C = 1/l*7-0.009;
                    var o = C > 0.03 ? 0.03 : C;
                        ctx.strokeStyle = 'rgba(0,0,0,'+ o +')'
                    console.log(l);
                ctx.beginPath()
                ctx.lineWidth=2;
                ctx.moveTo(dxdy[i].dx,dxdy[i].dy)
                        ctx.lineTo(dxdy[j].dx,dxdy[j].dy);
                    ctx.closePath()
                    ctx.stroke()

                }
            }
            window.requestAnimationFrame(roundMove)
        }
        roundMove();
    </script>
</html>

 

标签:
z
给个赞 7 人点赞
收藏 0 人收藏
hulan 作者

这家伙什么都没留下

作者最新