HTML5 Loading加载动画

资料来源：网络整理时间：2023/2/14 0:19:18 共计：3658 浏览

<!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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：Html5 Canvas 运动的太阳系的例子 | ·下一条：全局CSS的终结