您当前位置:首页 > 文章中心 > SCSCMS

html5粒子动画

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2014-10-21   阅读次数: 11   查看权限: 游客查看

html5粒子动画

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>html5粒子动画</title>
    <style type="text/css">
        html, body {
            text-align: center;
            margin:0;
            padding:0;
            background: #fff;
            color: #666666;
            line-height: 1.25em;
        }
        #outer {overflow: visible;}
        #canvasContainer {position: absolute;width: 1000px;left: 50%;margin-left: -500px}
        canvas {border: 1px solid #333333;background: #fff;}
    </style>
</head>
<body>
<div id="outer">
    <div id="canvasContainer">
        <canvas id="mainCanvas" width="1000" height="500"></canvas>
    </div>
</div>
<script type="text/javascript">
    (function () {
        function C() {
            e.globalCompositeOperation = "source-over";
            e.fillStyle = "rgba(8,8,12,0.65)";
            e.fillRect(0, 0, f, p);
            e.globalCompositeOperation = "lighter";
            x = q - u;
            y = r - v;
            u = q;
            v = r;
            for (var d = 0.86 * f, l = 0.125 * f, m = 0.5 * f, t = Math.random, n = Math.abs, o = z; o--;) {
                var h = A[o], i = h.x, j = h.y, a = h.a, b = h.b, c = i - q, k = j - r, g = Math.sqrt(c * c + k * k) || 0.001, c = c / g, k = k / g;
                if (w && g < m)var s = 14 * (1 - g / m), a = a + (c * s + 0.5 - t()), b = b + (k * s + 0.5 - t());
                g < d && (s = 0.0014 * (1 - g / d) * f, a -= c * s, b -= k * s);
                g < l && (c = 2.6E-4 * (1 - g / l) * f, a += x * c, b += y * c);
                a *= B;
                b *= B;
                c = n(a);
                k = n(b);
                g =0.5 * (c + k);
                0.1 > c && (a *= 3 * t());
                0.1 > k && (b *= 3 * t());
                c = 0.45 * g;
                c = Math.max(Math.min(c, 3.5), 0.4);
                i += a;
                j += b;
                i > f ? (i = f, a *= -1) : 0 > i && (i = 0, a *= -1);
                j > p ? (j = p, b *= -1) : 0 > j && (j = 0, b *= -1);
                h.a = a;
                h.b = b;
                h.x = i;
                h.y = j;
                e.fillStyle = h.color;
                e.beginPath();
                e.arc(i, j, c, 0, D, !0);
                e.closePath();
                e.fill()
            }
        }
        function E(d) {
            d = d ? d : window.event;
            q = d.clientX - m.offsetLeft - n.offsetLeft;
            r = d.clientY - m.offsetTop - n.offsetTop
        }
        function F() {w = !0;return!1}
        function G() {return w = !1}
        function H() {
            this.color = "rgba(" + Math.floor(255 * Math.random()) + "," + Math.floor(255 *Math.random()) + "," + Math.floor(255 * Math.random()) + ",1)";
            this.b = this.a = this.x = this.y = 0;
            this.size = 1
        }
        var D = 2 * Math.PI, f = 1000, p = 500, z = 600, B = 0.96, A = [], o, e, n, m, q, r, x, y, u, v, w;
        window.onload = function () {
            o = document.getElementById("mainCanvas");
            if (o.getContext) {
                m = document.getElementById("outer");
                n = document.getElementById("canvasContainer");
                e = o.getContext("2d");
                for (var d = z; d--;) {
                    var l = new H;
                    l.x = 0.5 * f;
                    l.y = 0.5 * p;
                    l.a = 34 * Math.cos(d) * Math.random();
                    l.b = 34 * Math.sin(d) * Math.random();
                    A[d] = l
                }
                q = u = 0.5 * f;
                r = v = 0.5 * p;
                document.onmousedown =F;
                document.onmouseup = G;
                document.onmousemove = E;
                setInterval(C, 33);
            } else{
                //不支持
            }
        }
    })();
</script>
</body>
</html>

 

关键词: html5粒子动画   编辑时间: 2014-10-21 21:51:30

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程