canvas之鼠标跟随特效时间：2022-09-29    作者：panda    访问：1571

效果展示

<canvas id="canvas"></canvas><style>
    canvas{background: black;}</style><script>
    var canvas = document.getElementById('canvas');
    var pen = canvas.getContext('2d');
    canvas.width = 500;
    canvas.height = 500;
    var x,y,mx,my,m;
    m = false;
    let hue = 0;  
    var list = [];
    function add(e){
        if(list.length<100){
            x = e.layerX;
            y = e.layerY;
            Array.apply(null, { length: 2 }).forEach(() =>{
                list.push(new hua());
         });
        }
    }
    canvas.addEventListener('click',add);
    canvas.addEventListener('mousemove',add);
    canvas.addEventListener('mouseout',mouseout);
    function mouseout(){
        m = false;
    }
    function mousemove(e){
        mx = e.layerX;
        my = e.layerY;
        m = true;
    }
    class hua{
        constructor(){
            this.x = x;
            this.y = y;
            this.size = 2;
            this.speedx = Math.random()*3-1.5;
            this.speedy = Math.random()*3-1.5;
            // this.color = `hsl(${hue}, 100%, 50%)`;
            this.color = 'rgb('+Math.random()*255+','+Math.random()*255+','+Math.random()*255+')';
        }
        updata(){
            if(m){
                this.x += (mx - this.x)/2000;
                this.y += (my - this.y)/2000;
            }
            else{
                this.x += this.speedx;
                this.y += this.speedy;
            }
            this.size -= 0.05;
        }
        hua(){
            pen.beginPath();
            pen.fillStyle = this.color;
            pen.arc(this.x,this.y,this.size,0,2*Math.PI);
            pen.fill();
        }
    }
    add({'x':Math.random()*255+canvas.width*0.4,'y':Math.random()*255+canvas.height*0.2});
    function anim(){
        pen.clearRect(0, 0, canvas.width, canvas.height);
        pen.fillStyle = 'rgba(0, 0, 0, 0.1)';
        pen.fillRect(0, 0, canvas.width, canvas.height);
        hue += 3;
        for(var i = 0; i < list.length; i++){
            list[i].updata();
            list[i].hua();
            for(var j = i + 1; j < list.length; j++){
                var x1 = list[j].x - list[i].x;
                var y1 = list[j].y - list[i].y;
                var jl = Math.sqrt(x1*x1 + y1*y1);
                if(jl<50){
                    pen.beginPath();
                    pen.moveTo(list[i].x,list[i].y);
                    pen.lineTo(list[j].x,list[j].y);
                    pen.strokeStyle = list[i].color;
                    pen.stroke();
                    pen.closePath();
                }
            }
            if(list[i].x<0 || list[i].x >canvas.width || list[i].y < 0 || list[i].y > canvas.height || list[i].size<0.3 ){//跑出去的都删掉
                list.splice(i,1);
            }
        }
        requestAnimationFrame(anim);
    }
    anim();
    setInterval(function(){add({'layerX':Math.random()*canvas.width,'layerY':Math.random()*canvas.height})},100);
</script>