前端效果代码鼠标跟谁echats

最新推荐文章于 2025-05-18 10:01:23 发布

刘双武

最新推荐文章于 2025-05-18 10:01:23 发布

阅读量101

点赞数

文章标签：跟随鼠标炫酷效果

本文链接：https://blog.youkuaiyun.com/weixin_43245286/article/details/90906610

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #mycanvas {
            position: fixed;
            z-index: -1;
        }
        
        #app {
            width: 100%;
            height: 800px;
            background: transparent;
            z-index: 2;
        }
    </style>
</head>

<body>
    <canvas id="mycanvas"></canvas>
    <div id="app">6666assssssdasdasdasdasdasdasd
        <button>666666</button>
    </div>
    <script>
        var canvas = document.getElementById("mycanvas");
        var c = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        window.addEventListener("resize", function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        var mousex = canvas.width / 2,
            mousey = canvas.height / 2;

        var shrinkCircles = false;




        window.addEventListener("mousemove", function(e) {
            mousex = e.clientX;
            mousey = e.clientY;
        });
        window.addEventListener("touchmove", function(e) {
            mousex = e.clientX;
            mousey = e.clientY;
        })

        function Circle(distanceFromCenter, travelsClockwise, start) {
            this.start = start;
            this.timer = 0;
            this.xCoord = 0;
            this.yCoord = 0;
            this.xDelay = mousex;
            this.yDelay = mousey;
            this.distanceFromCenter = distanceFromCenter;
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            this.color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
            this.update = function() {
                if (travelsClockwise == true) {
                    this.timer -= 0.05;
                } else {
                    this.timer += 0.05;
                }

                // Shrink / expand circles during events
                if (shrinkCircles == true) {
                    this.distanceFromCenter -= 1;
                } else {
                    if (this.distanceFromCenter < distanceFromCenter) {
                        this.distanceFromCenter += 1;
                    }
                }

                this.xDelay += (mousex - this.xDelay) * 0.05;
                this.yDelay += (mousey - this.yDelay) * 0.05;

                this.xCoord = this.xDelay + Math.sin(this.timer + this.start) * this.distanceFromCenter;
                this.yCoord = this.yDelay + Math.cos(this.timer + this.start) * this.distanceFromCenter;

                // Prevent circles from going off screen
                this.xCoord = Math.max(Math.min(this.xCoord, canvas.width), 0);
                this.yCoord = Math.max(Math.min(this.yCoord, canvas.height), 0);
                this.draw();
            }

            this.draw = function() {
                c.beginPath();
                c.arc(this.xCoord, this.yCoord, 3, 0, 2 * Math.PI);
                c.strokeStyle = this.color;
                c.stroke();
                c.fillStyle = this.color;
                c.fill();
                c.closePath();
            }
        }

        var circles = [
            new Circle(10, true, 80),
            new Circle(20, true, 30),
            new Circle(30, true, 40),
            new Circle(40, true, 80),
            new Circle(50, true, 60),
            new Circle(60, true, 180),
            new Circle(60, false, 80),
            new Circle(50, false, 30),
            new Circle(40, false, 40),
            new Circle(30, false, 80),
            new Circle(20, false, 60),
            new Circle(10, false, 180),
            new Circle(100, true, 180),
            new Circle(90, false, 150),
            new Circle(10, true, 180),
            new Circle(30, false, 150),
        ];

        function run() {
            c.globalAlpha = 1;
            c.fillStyle = 'rgba(0,0,0,0.10)';
            c.fillRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < circles.length; i++) {
                circles[i].update();
            }
        }
        window.onload = function() {
            setInterval(function() {
                run();
            }, 20);
        }
    </script>
</body>

</html>