js实现曲线螺旋转动canvas动画效果代码-html代码-BFW代码库

js实现曲线螺旋转动canvas动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现曲线螺旋转动canvas动画效果代码

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

<html>
<head>
    <style>
        body {
            background-color: #01aaff;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #01AAFF;
        }

        ::-webkit-scrollbar-thumb {
            background: #01AAFF;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #fff;
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body >
    <canvas id="waves" width="876" height="848" style="width: 701px; height: 679px;"></canvas>
    <script>
        /**
        * Generates multiple customizable animated sines waves
        * using a canvas element. Supports retina displays and
        * limited mobile support
        *
        * I've created a seperate library based on this pen.
        * Check it out at https://github.com/isuttell/sine-waves
        */
        function SineWaveGenerator(options) {
            $.extend(this, options || {});

            if (!this.el) {
                throw "No Canvas Selected";
            }
            this.ctx = this.el.getContext('2d');

            if (!this.waves.length) {
                throw "No waves specified";
            }

            // Internal
            this._resizeWidth();
            window.addEventListener('resize', this._resizeWidth.bind(this));
            // User
            this.resizeEvent();
            window.addEventListener('resize', this.resizeEvent.bind(this));

            if (typeof this.initialize === 'function') {
                this.initialize.call(this);
            }
            // Start the magic
            this.loop();
        }

        // Defaults
        SineWaveGenerator.prototype.speed = 10;
        SineWaveGenerator.prototype.amplitude = 50;
        SineWaveGenerator.prototype.wavelength = 50;
        SineWaveGenerator.prototype.segmentLength = 10;

        SineWaveGenerator.prototype.lineWidth = 2;
        SineWaveGenerator.prototype.strokeStyle = 'rgba(255, 255, 255, 0.2)';

        SineWaveGenerator.prototype.resizeEvent = function() {};

        // fill the screen
        SineWaveGenerator.prototype._resizeWidth = function() {
            this.dpr = window.devicePixelRatio || 1;

            this.width = this.el.width = window.innerWidth * this.dpr;
            this.height = this.el.height = window.innerHeight * this.dpr;
            this.el.style.width = window.innerWidth + 'px';
            this.el.style.height = window.innerHeight + 'px';

            this.waveWidth = this.width * 0.95;
            this.waveLeft = this.width * 0.25;
        }

        SineWaveGenerator.prototype.clear = function() {
            this.ctx.clearRect(0, 0, this.width, this.height);
        }

        SineWaveGenerator.prototype.time = 0;

        SineWaveGenerator.prototype.update = function(time) {
            this.time = this.time - 0.007;
            if (typeof time === 'undefined') {
                time = this.time;
            }

            var index = -1;
            var length = this.waves.length;

            while (++index < length) {
                var timeModifier = this.waves[index].timeModifier || 1;
                this.drawSine(time * timeModifier, this.waves[index]);
            }
            index = void 0;
            length = void 0;
        }

        // Constants
        var PI2 = Math.PI * 2;
        var HALFPI = Math.PI / 2;

        SineWaveGenerator.prototype.ease = function(percent, amplitude) {
            return amplitude * (Math.sin(percent * PI2 - HALFPI) + 1) * 0.5;
        }

        SineWav.........完整代码请登录后点击上方下载按钮下载查看