js实现canvas白色泡泡上浮动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现canvas白色泡泡上浮动画效果代码

代码标签: canvas 泡泡 上浮 动画

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        html,
        body {
            margin: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        body {
            background: #0cebeb;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            /* uigradients 网站 */
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const WIDTH = document.documentElement.clientWidth;
        const HEIGHT = document.documentElement.clientHeight;

        let ctx = document.getElementById('canvas'),
            content = ctx.getContext('2d'),
            round = [],
            initRoundPopulation = 80;
        ctx.width = WIDTH;
        ctx.height = HEIGHT;

        function box(index, x, y) {
            this.index = index;
            this.x = x;
            this.y = y;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0