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 =.........完整代码请登录后点击上方下载按钮下载查看