js实现鼠标跟随五颜六色泡泡canvas动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现鼠标跟随五颜六色泡泡canvas动画效果代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body style="background:#000;overflow:hidden;">
    <div id="container">
     
    </div>
    <script type="text/javascript" >
        var Sketch = function() {
    function e(e) {
        e = n(e || {}, l);
        var t = "sketch-" + r++
          , o = e.hasOwnProperty("canvas")
          , u = o ? e.canvas : document.createElement("canvas");
        switch (e.type) {
        case m:
            try {
                s = u.getContext("webgl", e)
            } catch (d) {}
            try {
                s = s || u.getContext("experimental-webgl", e)
            } catch (d) {}
            if (!s)
                throw "WebGL not supported";
            break;
        case c:
            try {
                s = u.getContext("2d", e)
            } catch (d) {}
            if (!s)
                throw "Canvas not supported";
            break;
        default:
            u = s = document.createElement("div")
        }
        return s.canvas = u,
        u.className = "sketch",
        o ? e.autoresize = !1 : (e.container.appendChild(u),
        e.hasOwnProperty("autoresize") || (e.autoresize = l.autoresize),
        u.id = t),
        n(self, g),
        n(s, e),
        n(s, p),
        a(),
        e.autoresize && i(),
        w.push(s),
        s.autostart && setTimeout(s.start, 0),
        s
    }
    function n(e, n) {
        for (var t in n)
            e.hasOwnProperty(t) || (e[t] = n[t]);
        return e
    }
    function t(e) {
        function n(e, n) {
            return function() {
                e.call(n, arguments)
            }
        }
        var t = {};
        for (var o in e)
            t[o] = "function" == typeof e[o] ? n(e[o], e) : e[o];
        return t
    }
    function o(e, n) {
        e.length = 0;
        for (var t = 0, o = n.length; o > t; t++)
            e[t] = n[t];
        return e
    }
    function a() {
        function e(e) {
            return M[e] || String.fromCharCode(e)
        }
        function n(e) {
            s.mouse.ox = s.mouse.x,
            s.mouse.oy = s.mouse.y,
            s.mouse.x = e.x,
            s.mouse.y = e.y,
            s.mouse.dx = s.mouse.x - s.mouse.ox,
            s.mouse.dy = s.mouse.y - s.mouse.oy
        }
        function a(e) {
            var n, o = t(e);
            o.original = e;
            for (var a = s.canvas, u = 0, i = 0; a; a = a.offsetParent)
                u += a.offsetLeft,
                i += a.offsetTop;
            if (o.touches && o.touches.length)
                for (var r, c = o.touches.length - 1; c >= 0; c--)
                    r = o.touches[c],
                    r.x = r.pageX - u,
                    r.y = r.pageY - i,
                    n = A[c] || r,
                    r.dx = r.x - n.x,
                    r.dy = r.y - n.x,
                    r.ox = n.x,
                    r.oy = n.y,
                    A[c] = t(r);
            else
                o.x = o.pageX - u,
                o.y = o.pageY - i,
                n = A.mouse || o,
                o.dx = o.x - n.x,
                o.dy = o.y - n.y,
                o.ox = n.x,
                o.oy = n.y,
                A.mouse = o;
            return o
        }
        function u(e) {
            e.preventDefault(),
            e = a(e),
            o(s.touches, e.touches),
            n(s.touches[0]),
            s.touchstart && s.touchstart(e),
            s.mousedown && s.mousedown(e)
        }
        function r(e) {
            e = a(e),
            o(s.touches, e.touches),
            n(s.touches[0]),
            s.touchmove && s.touchmove(e),
            s.mousemove && s.mousemove(e)
        }
        function c(e) {
            if (e = a(e),
            e.touches.length)
                for (var n in A)
                    e.touches[n] || delete A[n];
            else
                A = {};
            s.touchend && s.touchend(e),
            s.mouseup && s.mouseup(e)
        }
        function m(e) {
            e = a(e),
            s.mouseover && s.mouseover(e)
        }
        function d(e) {
            e = a(e),
            s.dragging || (x(s.canvas, "mousemove", h),
            x(s.canvas, "mouseup", v),
            y(document, "mousemove", h),
            y(document, "mouseup", v),
            s.dragging = !0),
            o(s.touches, [e]),
            s.touchstart && s.touchstart(e),
            s.mousedown && s.mousedown(e)
        }
        function h(e) {
            e = a(e),
            n(e),
            o(s.touches, [e]),
            s.touchmove && s.touchmove(e),
            s.mousemove && s.mousemove(e)
        }
        function f(e) {
            e = a(e),
            s.mouseout && s.mouseout(e)
        }
        function v(e) {
            e = a(e),
            s.dragging && (x(document, "mousemove", h),
            x(document, "mouseup", v),
            y(s.canvas, "mousemove", h),
            y(s.canvas, "mouseup", v),
            s.dragging = !1),
            delete A.mouse,
            s.touchend && s.touchend(e),
            s.mouseup && s.mouseup(e)
        }
        function w(e) {
            e = a(e),
            s.click && s.click(e)
        }
        function l(n) {
            s.keys[e(n.keyCode)] = !0,
            s.keys[n.keyCode] = !0,
            s.keydown && s.keydown(n)
        }
        function g(n) {
            s.keys[e(n.keyCode)] = !1,
            s.keys[n.keyCode] = !1,
            s.keyup && s.keyup(n)
        }
        var M = {
            8: "BACKSPACE",
            9: "TAB",
            13: "ENTER",
            16: "SHIFT",
            27: "ESCAPE",
            32: "SPACE",
            37: "LEFT",
            38: "UP",
            39: "RIGHT",
            40: "DOWN"
        };
        for (var k in M)
            p.keys[M[k]] = !1;
        var A = {};
        y(s.canvas, "touchstart", u),
        y(s.canvas, "touchmove", r),
        y(s.canvas, "touchend", c),
        y(s.canvas, "mouseover", m),
        y(s.canvas, "mousedown", d),
        y(s.canvas, "mousemove", h),
        y(s.canvas, "mouseout", f),
        y(s.canvas, "mouseup", v),
        y(s.canvas, "click", w),
        y(document, "keydown", l),
        y(document, "keyup", g),
        y(window, "resize", i)
    }
    function u() {
        if (!h) {
            var e = Date.now();
            s.dt = e - s.now,
            s.millis += s.dt,
            s.now = e,
            s.update && s.update(s.dt),
            s.autoclear && s.clear(),
            s.draw && s.draw(s)
        }
        h = ++h % s.interval,
        f = requestAnimationFrame(u)
    }
    function i() {
        if (s.autoresize) {
            var e = s.type === d ? s.style : s.canvas;
            s.fullscreen ? (s.height = e.height = window.innerHeight,
            s.width = e.width = window.innerWidth) : (e.heig.........完整代码请登录后点击上方下载按钮下载查看