canvas钟表


 



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            body{background: black;}
            canvas{background: #fff;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oC=document.getElementById("oc");
                var oG=oC.getContext("2d");
                function draw(){
                    //获取当前时间
                    var myDate=new Date();
                    var hour=myDate.getHours();
                    var min=myDate.getMinutes();
                    var sec=myDate.getSeconds();
                    //分格
                    oG.clearRect(0,0,oC.width,oC.height);
                    oG.beginPath();
                    for(var i=0;i<60;i++){
                        oG.moveTo(300,300);
                        oG.arc(300,300,200,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
                    }
                    oG.closePath();
                    oG.stroke();
                    //覆盖
                    oG.beginPath();
                    oG.moveTo(300,300);
                    oG.arc(300,300,200*19/20,0,360*Math.PI/180,false);
                    oG.fillStyle="#fff";
                    oG.closePath();
                    oG.fill();
                    //时
                    oG.beginPath();
                    oG.lineWidth=3;
                    for(var i=0;i<12;i++){
                        oG.moveTo(300,300);
                        oG.arc(300,300,200,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
                    }
                    oG.closePath();
                    oG.stroke();
                    //覆盖
                    oG.beginPath();
                    oG.moveTo(300,300);
                    oG.arc(300,300,200*18/20,0,360*Math.PI/180,false);
                    oG.fillStyle="#fff";
                    oG.closePath();
                    oG.fill();
                    
                    //时分秒针
                    oG.beginPath();
                    oG.lineWidth=5;
                    oG.moveTo(300,300);
                    oG.arc(300,300,200*0.5,((hour+min/60)*30-90)*Math.PI/180,((hour+min/60)*30-90)*Math.PI/180,false);
                    oG.closePath();
                    oG.stroke();
                    
                    oG.beginPath();
                    oG.lineWidth=3;
                    oG.moveTo(300,300);
                    oG.arc(300,300,200*0.6,((min+sec/60)*6-90)*Math.PI/180,((min+sec/60)*6-90)*Math.PI/180,false);
                    oG.closePath();
                    oG.stroke();
                    
                    oG.beginPath();
                    oG.lineWidth=1;
                    oG.moveTo(300,300);
                    oG.arc(300,300,200*0.8,(sec*6-90)*Math.PI/180,(sec*6-90)*Math.PI/180,false);
                    oG.closePath();
                    oG.stroke();
                }
                draw();
                setInterval(draw,1000);
            }
        </script>
    </head>
    <body>
        <canvas id="oc" width="600" height="600"></canvas>
    </body>
</html>

 

posted @ 2016-12-14 18:35  rain92  阅读(184)  评论(0)    收藏  举报