js实现canvas海浪动画效果代码-html代码-BFW代码库

js实现canvas海浪动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas海浪动画效果代码

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

<html>
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: hsl(195, 100%, 7%);
        }

        #canvas {
            margin: 0 auto;
            display: block;
            filter: url('#shadowed-goo');
        }

        svg {
            display: none;
        }
    </style>

</head>
<body>
    <canvas id="canvas" width="621" height="679">Your browser doesn't support canvas</canvas>


    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="shadowed-goo">

                <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur>
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"></feColorMatrix>
                <feGaussianBlur in="goo" stdDeviation="3" result="shadow"></feGaussianBlur>
                <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow"></feColorMatrix>
                <feOffset in="shadow" dx="1" dy="1" result="shadow"></feOffset>
                <feBlend in2="shadow" in="goo" result="goo"></feBlend>
                <feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
            </filter>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur>
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"></feColorMatrix>
                <feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
            </filter>
        </defs>
    </svg><script>
        /**
        * Constants
        */
        const TWO_PI = Math.PI * 2;

        /**
        * Application Class
        */
        class Application {
            /**
            * Application constructor
            */
            constructor() {
                this.canvas = document.getElementById("canvas");
                this.context = this.canvas.getContext("2d");
                this.width = this.canvas.width = window.innerWidth;
                this.height = this.canvas.height = window.innerHeight;
                this.center = {
                    x: this.width / 2,
                    y: this.height / 2
                };

                this.circleContainers = [];

                //Resize listener for the canvas to fill browser window dynamically
                window.addEventListener('resize', () => this.resizeCanvas(), false);
            }

            /**
            * Simple resize function. Reinitializes everything on the canvas while changing the width/height
            */
            resizeCanvas() {
                this.width = this.canvas.width = window.innerWidth;
                this.height = this.canvas.height = window.innerHeight;
                this.center = {
                    x: this.width / 2,
                    y: this.height / 2
                };

                //Empty the previous container and fill it again with new CircleContainer objects
                this.circleContainers = [];
                this.initializeCircleContainers();
            }

            /**
            * Create a number of CircleContainer objects based on the numberOfContainers variable
            * @return void
            */
            initializeCircleContainers() {
                for (let x = 0; x < this.width + 100; x += 100) {
                    for (let y = 0; y < this.height + 100; y += 100) {
                        //Initialize a new instance of the CircleContainer class
                        let circleContainer = new CircleContainer(this.context, x, y);

                        //Let the CircleContainer initialize it's children
                        circleContainer.initializeCircles();

                        //Add the container to our array of CircleContainer objects
                        this.circleContainers.push(circleContainer);
                    }
                }
            }

            /**
            * Updates the application and every child of the application
            * @return void
            */
            update() {
                for (let i = 0; i < this.circleContainers.length; i++) {
                    this.circleContainers[i].update();
                }
            }

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