js实现canvas粒子波浪动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子波浪动画效果代码

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

<html>
<head>
    <meta charset="utf-8">
    <title>粒子波浪</title>

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

        canvas {
            position: relative;
            width: 100%;
            height: 100%;
        }

        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        footer {
            position: fixed;
            right: 0;
            top: 0;
            left: 0;
            padding: 10px 10px;
            text-align: right;
            font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            font-size: 14px;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        a {
            display: inline-block;
            margin-left: 2px;
            padding: 2px 4px;
            color: #343436;
            text-decoration: none;
            background-color: #fcd000;
            border-radius: 4px;
            opacity: 1;
            -webkit-transition: opacity 0.2s;
            transition: opacity 0.2s;
        }
        a:hover {
            opacity: 0.6;
        }
    </style>
</head>
<body>

    <canvas width="1106" height="942"></canvas>

    <script>
        !function(n, r) {
            "object" == typeof exports && "undefined" != typeof module?module.exports = r(): "function" == typeof define && define.amd?define(r): n.starlings = r()}(this, function() {
                "use strict"; return function(n, r, t, o, e, u, i, f) {
                    var a = f.onSetup; void 0 === a && (a = null); var v = f.onRepeat; void 0 === v && (v = null); var c = f.modifier; void 0 === c && (c = null); var l = f.perspective; void 0 === l && (l = 1); var d = f.pixelRatio; void 0 === d && (d = 1); var m = f.triangles; void 0 === m && (m=!1); var s, p, y = r.length, w = function(n, r) {
                        var t = s.createShader(n); return s.shaderSource(t, r), s.compileShader(t), t
                    }, b = function() {
                        for (var n = 0; n < o.length; n += 1) {
                            for (var r = s.createBuffer(), e = o[n], u = e.data(0, 0).length, i = new Float32Array(t*y*u), f = 0; f < t; f += 1)for (var a = e.data(f, t), v = f*y*u, l = 0; l < y; l += 1)for (var d = 0; d < u; d += 1)null !== c && e.name === c.attribute?i[v] = c.value(i[v], a, d, l): i[v] = a[d],
                            v += 1; s.bindBuffer(s.ARRAY_BUFFER, r),
                            s.bufferData(s.ARRAY_BUFFER, i, s.STATIC_DRAW); var m = s.getAttribLocation(p, o[n].name); s.enableVertexAttribArray(m),
                            s.vertexAttribPointer(m, u, s.FLOAT, !1, !1, 0, 0)}},
                    A = function() {
                        e.push({
                            name: "uMVP", type: "mat4"
                        }); for (var n = 0; n < e.length; n += 1) {
                            var r = s.getUniformLocation(p, e[n].name); e[n].location = r
                        }},
                    F = {
                        float: function(n, r) {
                            return s.uniform1f(n, r)},
                        vec2: function(n, r) {
                            return s.uniform2fv(n, r)},
                        vec3: function(n, r) {
                            return s.uniform3fv(n, r)},
                        vec4: function(n, r) {
                            return s.uniform4fv(n, r)},
                        mat2: function(n, r) {
                            return s.uniformMatrix2fv(n, !1, r)},
                        mat3: function(n, r) {
                            return s.uniformMatrix3fv(n, !1, r)},
                        mat4: function(n, r) {
                            return s.uniformMatrix4fv(n, !1, r)}},
                    g = function() {
                        s.clear(16640),
                        s.useProgram(p),
                        null !== v && v(s, p, e); for (var n = 0; n < e.length; n += 1)F[e[n].type](e[n].location, e[n].value); s.drawArrays(m?s.TRIANGLES: s.POINTS, 0, y*t),
                        requestAnimationFrame(g)},
                    h = function() {
                        n.width = n.clientWidth*d,
                        n.height = n.clientHeight*d; var r = s.drawingBufferWidth,
                        t = s.drawingBufferHeight; s.viewport(0, 0, r, t),
                        e[e.length-1].value = [l/(r/t),
                            0,
                            0,
                            0,
                            0,
                            l,
                            0,
                            0,
                            0,
                            0,
                            -1,
                            -1,
                            0,
                            0,
                            1,
                            1]}; s = n.getContext("webgl"),
                    p = s.createProgram(),
                    s.attachShader(p, w(s.VERTEX_SHADER, u)),
                    s.attachShader(p, w(s.FRAGMENT_SHADER, i)),
                    s.linkProgram(p),
                    A(),
                    h(),
                    b(),
                    null !== a && a(s),
                    g(),
                    window.addEventListener("resize", h, !1)}});


        "use strict";

        // Do you like rainbow waves?
        var rainbow = false;

        // Need more performance?
        var HD = true;

        var canvas = document.querySelector("canvas");
        var background = document.querySelector(".background");
        var bar = document.querySelector(".progress");

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