canvas 实现星空闪烁的效果,鼠标滑动,连接周围的点

Posted 2020-10-06 小芹菜的琴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 实现星空闪烁的效果,鼠标滑动,连接周围的点相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
   <canvas id="mycanvas"></canvas>
</body>
<script>
    var c = document.getElementById("mycanvas");
    var ctx = c.getContext("2d");
    c.width =  window.innerWidth;
    c.height = window.innerHeight;
    var points = [];
    //console.log(ctx.width,ctx.height);
    function bgc() {
        var bg = ctx.createLinearGradient(0,0,window.innerWidth,window.innerHeight);
        bg.addColorStop(0,"#000");
        bg.addColorStop(1,"#fff");
        ctx.fillStyle = bg;
        ctx.fillRect(0,0,window.innerWidth,window.innerHeight);
        //ctx.fill();
    }

    /*创造点点*/
    var point = [];
    for(var i=0;i<500;i++){
        point.push({
            x: Math.random()*window.innerWidth,
            y: Math.random()*window.innerHeight,
            vx: Math.random()-0.5,
            vy: Math.random()+0.5,
            size: 3+Math.random()
        })
    }
    //console.log(point);
    /*开始画点*/
    function rads(x) {
        return Math.PI*2/360*x;
    }
    function drawPoint(c) {
        c.clearRect(0,0,window.innerWidth,window.innerHeight);
        bgc();
        var temp;
        for(var i=0;i<500;i++){
            temp = point[i];
            temp.x += point[i].vx;
            temp.y += point[i].vy;
            temp.size = 2+Math.random();
            if(temp.x<0) temp.x = window.innerWidth;
            if(temp.x>window.innerWidth) temp.x = 0;
            if(temp.y>window.innerHeight) temp.y = 0;
            c.beginPath();
            //c.fillStyle = "yellow";
            c.arc(temp.x,temp.y,temp.size,0,rads(360));
            points.push({indexX:temp.x,indexY:temp.y});
            c.strokeStyle = "white";
            c.stroke();
            R = Math.floor(Math.random()*255);
            G = Math.floor(Math.random()*255);
            B = Math.floor(Math.random()*255);
            c.fillStyle = "rgb("+R+","+G+","+B+")";
            c.fill();
        }
    }


   // console.log(points);
//这是一个demo,试着看一个点周围是不是能够互相连接,注释掉的部分是一个demo
    /*for(var i=0;i<500;i++){
        for(var j=0;j<500;j++){
            var dis = Math.sqrt(Math.pow(points[i].indexX-points[j].indexX,2)+Math.pow(points[i].indexY-points[j].indexY,2));
           if(dis<50){
               ctx.beginPath();
               ctx.moveTo(points[i].indexX,points[i].indexY);
               ctx.lineTo(points[j].indexX,points[j].indexY);
               ctx.stroke();
           }
        }
    }*/

    drawPoint(ctx);
        document.onmousemove = function (event) {
            e= event  || window.event;
            //console.log(e.pageX,e.pageY);
            drawPoint(ctx);
            for(var i=0;i<500;i++){
                var diss = Math.sqrt(Math.pow(e.pageX-points[i].indexX,2)+Math.pow(e.pageY-points[i].indexY,2));
                if(diss<100) {
                    for (var j = 0; j < 500; j++) {
                        var dis = Math.sqrt(Math.pow(points[i].indexX - points[j].indexX, 2) + Math.pow(points[i].indexY - points[j].indexY, 2));
                        if (dis < 80) {
                            ctx.beginPath();
                            ctx.moveTo(points[i].indexX, points[i].indexY);
                            ctx.lineTo(points[j].indexX, points[j].indexY);
                            ctx.stroke();
                        }
                    }
                }
            }
        }



</script>
</html>

效果如下:

以上是关于canvas 实现星空闪烁的效果,鼠标滑动,连接周围的点的主要内容，如果未能解决你的问题，请参考以下文章