js 实现鼠标跟随彩色气泡_js中鼠标泡泡-CSDN博客

本文链接：https://blog.csdn.net/weixin_44100514/article/details/103711636

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        *{
            margin:0;padding:0;
        }
        body{overflow:hidden;}
        #canvas{
            background-color:black;
            /*width:100%;
            height:100vh;*/
        }

    </style>

</head>
<body>

<canvas id="canvas" ></canvas>

</body>

<script>
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext("2d");
    var starlist = [];
    function init(){
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    init();
    window.onresize = init;

    canvas.addEventListener('mousemove',function(e){
        starlist.push(new Star(e.offsetX,e.offsetY));
        console.log(starlist)
    })

    function random(min,max){
        return Math.floor((max-min)*Math.random()+ min);
    }

    function Star(x,y){
        this.x = x;
        this.y = y;
        this.vx = (Math.random()-0.5)*3;
        this.vy = (Math.random()-0.5)*3;
        this.color = 'rgb('+random(0,256)+','+random(0,256)+','+random(0,256)+')';
        this.a = 1;
        console.log(this.color);
        this.draw();
    }
    Star.prototype={
        draw:function(){
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.globalCompositeOperation='lighter'
            ctx.globalAlpha= this.a;
            ctx.arc(this.x,this.y,30,0,Math.PI*2,false);
            ctx.fill();
            this.updata();
        },
        updata(){
            this.x+=this.vx;
            this.y+=this.vy;
            this.a*=0.98;
        }
    }
    console.log(new Star(150,200));
    function render(){
        ctx.clearRect(0,0,canvas.width,canvas.height)

        starlist.forEach((item,i)=>{
            item.draw();
            if(item.a<0.05){
                starlist.splice(i,1);
            }
        })

        requestAnimationFrame(render);
    }
    render();

</script>
<div style="text-align:center;">
</div>

</html>

在这里插入图片描述