canvas时钟 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            background:#000;
        }
        #c1{
            background:#fff;
        }
    </style>
    <script>
        window.onload=function(){
            var oC=document.getElementById('c1');
            var gd=oC.getContext('2d');
            function toDraw(){
                var x=200;
                var y=200;
                var r=150;
                var oDate= new Date();
                var h=oDate.getHours();
                var m=oDate.getMinutes();
                var s=oDate.getSeconds();
                var ms=oDate.getMilliseconds();
                console.log(ms);
                gd.clearRect(0,0,oC.width,oC.height);
                for(var i=0;i<60;i++){
                    gd.beginPath();
                    gd.moveTo(x,y);
                    gd.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
                    gd.closePath();
                    gd.stroke();
                }
                    gd.fillStyle='#fff';
                    gd.beginPath();
                    gd.moveTo(x,y);
                    gd.arc(x,y,r*19/20,0,360*Math.PI/180,false);
                    gd.closePath();
                    gd.fill();
                for(var i=0;i<12;i++){
                    gd.beginPath();
                    gd.moveTo(x,y);
                    gd.arc(x,y,r,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
                    gd.closePath();
                    gd.stroke();
                }
                    gd.fillStyle='#fff';
                    gd.beginPath();
                    gd.moveTo(x,y);
                    gd.arc(x,y,r*18/20,0,360*Math.PI/180,false);
                    gd.closePath();
                    gd.fill();

                    gd.lineWidth=5;
                    gd.beginPath();
                    gd.moveTo(x,y);
                    gd.arc(x,y,r*14/20,(-90+h*30+m/2)*Math.PI/180,(-90+h*30+m/2)*Math.PI/180,false);
                    gd.closePath();
                    gd.stroke();

                    gd.lineWidth=3;
                    gd.beginPath();
                    gd.moveTo(x,y);
                    gd.arc(x,y,r*16/20,(-90+m*6+s/10)*Math.PI/180,(-90+m*6+s/10)*Math.PI/180,false);
                    gd.closePath();    
                    gd.stroke();
                    gd.lineWidth=1;
                    gd.beginPath();
                    gd.moveTo(x,y);
                    gd.arc(x,y,r*18/20,(-90+s*6+ms*6/1000)*Math.PI/180,(-90+s*6+ms*6/1000)*Math.PI/180,false);
                    gd.closePath();    
                    gd.stroke();
            }
            toDraw();
            setInterval(toDraw,1000)
        };
    </script>
</head>
<body>
    <canvas width="600" height="600" id="c1"></canvas>
</body>
</html>

 

posted @ 2016-11-14 23:41  Jason齐齐  阅读(211)  评论(0)    收藏  举报