html5--canvas绘制简单的时钟

http://5227788.cn/static/time.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');

        setInterval(toDraw,1000);
    function toDraw(){
        var x=200;
        var y=200;
        var r=150;

            oGC.clearRect(0, 0, oC.width,oC.height);
        var oDte=new Date();
        var oHours=oDte.getHours();
        var oMin=oDte.getMinutes();
        var oSen=oDte.getSeconds();

            var oHoursValue=(-90+oHours*30+oMin/2)*Math.PI/180;
            var oMinValue=(-90+oMin*6)*Math.PI/180;
            var oSenValue=(-90+oSen*6)*Math.PI/180;

          oGC.beginPath();
        for(var i=0; i<60; i++){

            oGC.moveTo(x,y);
            oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle='white';
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();

          oGC.lineWidth=3;
         oGC.beginPath();

        for(var i=0; i<12; i++){

            oGC.moveTo(x,y);
            oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle='white';
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();
         oGC.lineWidth=3;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*9/20,oMinValue,oMinValue,false);
        oGC.closePath();
        oGC.stroke();

          oGC.lineWidth=1;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*14/20,oSenValue,oSenValue,false);
        oGC.closePath();
        oGC.stroke();

        oGC.lineWidth=4;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*6/20,oHoursValue,oHoursValue,false);

        oGC.closePath();
        oGC.stroke();

     }

    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>