js实现canvas鼠标跟随彩带飘荡效果代码-html代码-BFW代码库

js实现canvas鼠标跟随彩带飘荡效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas鼠标跟随彩带飘荡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        body,
        html {
            margin: 0px;
            padding: 0px;
            position: fixed;
        }
    </style>

</head>
<bod>
    <div></div>
    <script>
        var canvas = document.createElement("canvas"),
        c = canvas.getContext("2d");
        var w = (canvas.width = window.innerWidth),
        h = (canvas.height = window.innerHeight);

        document.body.appendChild(canvas);

        c.fillStyle = "rgba(30,30,30,1)";
        c.fillRect(0, 0, w, h);

        var hi = [],
        count = 6,
        d = 10;

        class rope {
            constructor(n, r) {
                this.n = n;
                this.r = r;
                this.d = 40;
                this.choice = [Math.floor(Math.random() * 50),
                    Math.floor(Math.random() * 20+170)];
                this.col =
                "hsla(" +this.choice[Math.floor(Math.random()*1.1)]+
                ",100%," +
                Math.floor(Math.random() * 25 + 50) +
                "%," +
                Math.random() +
                ")";
                this.tail = new Array(this.n);
                for (var i = 0; i < this.n; i++) {
                    this.tail[i] = {
                        x: Math.random()*w,
                        y: Math.random()*h
                    };
                }
            }
            move(mx, my) {
                for (var i = 0; i < this.n; i++) {
                    if (i > 0) {
                        this.tail[i].tx = this.tail[i - 1].x;
                        this.tail[i].ty = this.tail[i - 1].y;
                    } else {
                        this.tail[i].tx = mx;
                        this.tail[i].ty = my;
                    }
                    this.tail[i].dx = this.tail[i].tx - this.tail[i].x;
                    this.tail[i].dy = this.tail[i].ty - this.tail[i].y;

                    this.tail[i].phi = Math.atan2(this.tail[i].dy, this.tail[i].dx);
                    this.tail[i].l = Math.sqrt(
                        Math.pow(this.tail[i].dx, 2) + Math.pow(this.tail[i].dy, 2)
                    );
                    this.tail[i].dx = this.tail[i].dx / this.tail[i].l * -this.r;
                    this.tail[i].dy = this.tail[i].dy / this.tail[i].l * -this.r;
                    this.tail[i].x = this.tail[i].tx + this.tail[i].dx;
                    this.tail[i].y = this.tail[i].ty + this.tail[i].dy;
                    this.tail[i].dx = this.r * Math.cos(this.tail[i].phi);
                    this.tail[i].dy = this.r * Math.sin(this.tail[i].phi);
                }
            }
            show() {
                c.beginPath();
                for (var i = 0; i < this.n; i++) {
                    // c.beginPath();
                    c.lineTo(
                        this.tail[i].x + this.tail[i].dx,
                        this.tail[i].y + this.tail[i].dy
                    );
                }
                c.lineTo(this.tail[this.n - 1].x, this.tail[this.n - 1].y);
                c.strokeStyle = this.col;
                c.lineWidth = this.d;
                c.lineCap = "round";
                c.lineJoin = "round";
                c.stroke();
            }
        }
        var le;
        for (var j = 0; j < count; j++) {
            le = Math.floor((Math.random()*500+500)/d);
            hi[j] = new rope(le, d);
        }
        var q = Math.random() * 5,
        x = w / 2,
        y = h / 2,
        x2 = w / 2,
        y2 = h / 2,
        ex = 0,
        ey = 0,
        t = 0,
        r1 = 10,
        dist = 0;
        function draw() {
            t += 0.1;
            q = 20;
            x2 =
       .........完整代码请登录后点击上方下载按钮下载查看