隐藏

HTML5 Loading加载动画

发布:2016/1/14 12:50:09作者:管理员 来源:本站 浏览次数:1000

<!DOCTYPE html>
    <head>
        <title>Test for H5Draw</title>
        <style>
            #cvs{
                border:solid 1px #999;
                background-color:#000
            }
        </style>
        <script src="http://cloud.github.com/downloads/scottkiss/H5Draw/H5Draw.js"></script>
        <script>
            window.onload = function(){
                    var angle = [20,50,80,115,150,190,235];
                    var alpha = [0.4,0.5,0.6,0.7,0.8,0.9,1];
                    var size = [2,2.5,3,3.5,4,4.5,4.6];
                    var h5dctx = H5D.D2('cvs');
                    setInterval(function(){
                    h5dctx.clear();
                    for(var i = 0;i < 7;i++){
                        if(angle[i]==360){angle[i]=0;}
                        var x = 14*Math.cos((angle[i])*Math.PI/180)+240;
                        var y = 14*Math.sin((angle[i])*Math.PI/180)+80;
                        h5dctx.drawCircle(x,y,size[i]).fill(
                        {    color:"rgba(156,236,255,"+alpha[i]+")",
                            shadow:{
                            //blur:2,color:"#ddd"
                        }});
                       
                        angle[i]+=8;
                    }
                    h5dctx.drawText({
                        message:"Loading...",
                        xPos:220,
                        yPos:125,
                        type:"fill",
                   
                        color:"rgba(255,255,255,1)",
                       
                    });
                    },33);
               
               
               
            }           
        </script>
    </head>

    <body>
        <canvas id="cvs" width="500" height="500">
            sorry ,your browser dosen't support html5
        </canvas>
    </body>

</html>