html5实现待机动画的效果

html5实现待机动画的效果

   
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html5实现待机动画的效果</title>
</head>
<body>
    <canvas id="can1" width="400" height="300" style="border: 1px solid red">

    </canvas>
    <script type="text/javascript">
        var can1=document.getElementByIdx_x("can1");
        var cxt=can1.getContext("2d");

        var cw=parseInt(can1.width);
        var ch=parseInt(can1.height);

        //该计数器是用来控制透明度的,这样可以实现动画效果
        var count=0;


        aim();
        function aim(){
            cxt.clearRect(0,0,400,300);

            //下边开始绘制我们的36个小长方形
            for(var i=0;i<36;i++){
                cxt.save();
                //绘制原理是绘制完我们的长方形图形之后,将其旋转
                var r=(i*10)*Math.PI/180;
                //1,将坐标原点移动到我们画布的中心
                cxt.translate(cw/2,ch/2);

                cxt.rotate(r);
                if(i==count){
                    cxt.globalAlpha=1.0;
                }
                else{
                    cxt.globalAlpha=0.3;
                }

                cxt.beginPath();
                cxt.fillStyle="gray";
                cxt.fillRect(0,0,100,5);
                cxt.restore();

            }
            count=(count+1)6;
        }
        setInterval("aim()",100);
    </script>

</body>
</html>

你可能感兴趣的:(html5实现待机动画的效果)