酷炫Html5旋转代码【转】 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <!-- js引用包 -->
    <script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script>
<style>

> body {
    margin: 0;
    overflow: hidden
}
div {
    padding: 1px 5px;
    background: #333;
    position: absolute;
    z - index: 2;
    color: #555;
    font - family: arial
}
a {
    color: #ccf
}
a: hover {
    color: red
}


</style> 

<script>

window.onload = function() {
    C = Math.cos;
    S = Math.sin;
    U = 0;
    w = window;
    j = document;
    d = j.getElementById("kele" + "yi_com");
    c = d.getContext("2d");
    W = d.width = w.innerWidth;
    H = d.height = w.innerHeight;
    c.fillRect(0, 0, W, H);
    c.globalCompositeOperation = "lighter";
    c.lineWidth = 0.2;
    c.lineCap = "round";
    var bool = 0,
    t = 0;
    d.onmousemove = function(e) {
        if (window.T) {
            if (D == 9) {
                D = Math.random() * 15;
                f(1);
            }
            clearTimeout(T);
        }
        X = e.pageX;
        Y = e.pageY;
        a = 0;
        b = 0;
        A = X,
        B = Y;
        R = (e.pageX / W * 999 >> 0) / 999;
        r = (e.pageY / H * 999 >> 0) / 999;
        U = e.pageX / H * 360 >> 0;
        D = 9;
        g = 360 * Math.PI / 180;
        T = setInterval(f = function(e) {
            c.save();
            c.globalCompositeOperation = "source-over";
            if (e != 1) {
                c.fillStyle = "rgba(0,0,0,0.02)";
                c.fillRect(0, 0, W, H);
            }
            c.restore();
            i = 25;
            while (i--) {
                c.beginPath();
                if (D > 450 || bool) {
                    if (!bool) {
                        bool = 1;
                    }
                    if (D < 0.1) {
                        bool = 0;
                    }
                    t -= g;
                    D -= 0.1;
                }
                if (!bool) {
                    t += g;
                    D += 0.1;
                }
                q = (R / r - 1) * t;
                x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R);
                y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
                if (a) {
                    c.moveTo(a, b);
                    c.lineTo(x, y)
                }
                c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)";
                c.stroke();
                a = x;
                b = y;
            }
            U -= 0.5;
            A = X;
            B = Y;
        },
        16);
    }
    j.onkeydown = function(e) {
        a = b = 0;
        R += 0.05
    }
    d.onmousemove({
        pageX: 300,
        pageY: 290
    })
}


</script>

</head>
  <body>
    <div id="text"></div>  
    <canvas id="keleyi_com"></canvas>
    
  </body>
</html>

 

posted @ 2015-04-21 15:06  CanIHelpYou?  阅读(891)  评论(0)    收藏  举报