js实现canvas彩色线条缩放波动音频波纹动画效果代码-html代码-BFW代码库

js实现canvas彩色线条缩放波动音频波纹动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas彩色线条缩放波动音频波纹动画效果代码

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

<html lang="en">
<head>

    <meta charset="UTF-8">



    <style>
        body {
            overflow: hidden;
            background: #101211;
            margin: 0;
        }
    </style>



</head>

<body>


    <script>
        "use strict";
        class Stick {
            constructor(x) {
                this.x = x;
                this.color = ["#1E00FF",
                    "#00FF9E",
                    "#E1FF00",
                    "#FF0061"][~~(Math.random() * 4)];
                this.rand = Math.random();
                this.isGrowing = true;
                this.growSpeed = (Math.random() * 4);
                this.height = (this.rand * 16) + 6;
                this.growSpeed = this.growSpeed <= 0.4 ? 0.4: this.growSpeed;
            }
            render(ctx) {
                const {
                    innerHeight,
                    innerWidth
                } = window;
                const y = innerHeight / 2;
                const w = innerWidth / 200;
                ctx.save();
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, y - (this.height / 2), w, this.height);
                ctx.closePath();
                ctx.restore();
            }
            animate() {
                const {
                    innerHeight
                } = window;
                if (this.height >= innerHeight)
                    this.isGrowing = false;
                if (this.height <= 4)
          .........完整代码请登录后点击上方下载按钮下载查看