html5酷炫

原文地址：http://www.oschina.net/code/snippet_100646_6176

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>star</title>
<script type="text/javascript">

    window.onload = function () {
        main();
    }
    function main(e)
    {
        j = document;
        d = j.getElementById("c");
        c = d.getContext("2d");
        MyCos = Math.cos;
        MySin = Math.sin;
        W = d.width = window.innerWidth;
        H = d.height = window.innerHeight;
        c.fillRect(0, 0, W, H); 
        c.globalCompositeOperation = "lighter"; 
        c.lineWidth = 0.2;
        c.lineCap = "round";

        
        X = W / 2; 
        Y = H / 2;

        RadiousA = 100;
        RadiousB = 1;
        
        AngleA = 0;
        
        BeginA = 0;
        U = 0;
        
        big = true;
        
        a = 0;
        b = 0;
        
        x = X + RadiousA * MyCos(BeginA);
        y = Y + RadiousA * MySin(BeginA);
        
        d.onmousemove = function(e)
        {
        
        if(e)
        {
            X = e.x;
            Y = e.y;
            x = X + RadiousA * MyCos(BeginA);
            y = Y + RadiousA * MySin(BeginA);
        }
        
        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();
                AngleA = Math.acos(RadiousB / RadiousA) * 2;

                i = 25; while(i --) {
                    c.beginPath();
                    
                    BeginA += AngleA;
                    a = X + RadiousA * MyCos(BeginA);
                    b = Y + RadiousA * MySin(BeginA);
                    
                    c.moveTo(x, y);
                    c.lineTo(a, b)

                    c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; 
                    c.stroke();
                    x = a; 
                    y = b; 
                    
                    U += 0.1;
                }

                RadiousB += (big?1:-1);
                RadiousA += (big?1:-1);
                
                
                if(RadiousB >= Y)
                {
                    big = false;
                }
                else if(RadiousB <= 100)
                {
                    big = true;
                }
                
                
            }, 16);
            
            };

        d.onmousemove();
    }

</script>
</head>


<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
<canvas id="c"></canvas>
</body>
</html>

　　

完

posted @ 2011-09-16 19:25  wangkangluo1  阅读(330)  评论(0)  编辑  收藏  举报