html5 canvas简易时钟

        <canvas id=‘clock‘ width=500 height=500>
            您的浏览器需要升级
        </canvas>
        <script type="text/javascript" charset="utf-8">
          var clock=document.getElementById("clock");
          var cxt=clock.getContext(‘2d‘);

          function drawClock () {
          //清除画布
              cxt.clearRect(0,0,500,500);
          var now=new Date();
          var sec=now.getSeconds();
          var min=now.getMinutes();
          var hour=now.getHours();
          //时间格式   问题：将24小时制转化整12小时制
          hour=hour>12?hour-12:hour;
          hour=hour+min/60;
          //表盘（蓝色）
          cxt.strokeStyle=‘blue‘;
          cxt.lineWidth=10;
          cxt.beginPath();
          cxt.arc(250,250,200,0,360,false);
          cxt.closePath();
          cxt.stroke();
          //刻度
            //时刻度
            for (var i=0;i<12;i++) {
                cxt.save();
                cxt.lineWidth=7;
                cxt.strokeStyle=‘#000‘;
                //设置开始点
                cxt.translate(250,250);
                //设置弧度
                cxt.rotate(i*30*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-170);
                cxt.lineTo(0,-190);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            }
            //分刻度
            for (var i=0;i<60;i++) {
                cxt.save();
                cxt.strokeStyle=‘#000‘;
                cxt.lineWidth=5;
                cxt.translate(250,250);
                cxt.rotate(i*6*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-180);
                cxt.lineTo(0,-190);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            }

         //时针

         //设置时针分割
         cxt.save();

         cxt.lineWidth=7;
         cxt.strokeStyle=‘#000‘;
         cxt.translate(250,250);
         cxt.rotate(hour*30*Math.PI/180);
         cxt.beginPath();
         cxt.moveTo(0,-140);
         cxt.lineTo(0,10);
         cxt.closePath();
         cxt.stroke();
         cxt.restore();
         //分针
         cxt.save();
         cxt.lineWidth=5;
         cxt.strokeStyle=‘#000‘;
         cxt.translate(250,250);
         cxt.rotate(min*6*Math.PI/180);
         cxt.beginPath();
         cxt.moveTo(0,-160);
         cxt.lineTo(0,15);
         cxt.closePath();
         cxt.stroke();
         cxt.restore();

         //秒针
         cxt.save();
         cxt.lineWidth=3;
         cxt.strokeStyle=‘red‘;
         ///cxt.translate(250,250);
         cxt.translate(250,250);
         cxt.rotate(sec*6*Math.PI/180);
         cxt.beginPath();
         cxt.moveTo(0,-170);
         cxt.lineTo(0,20);
         cxt.closePath();
         cxt.stroke();
         //秒针修饰
         cxt.beginPath();
         cxt.arc(0,0,5,0,360,false);
         cxt.closePath();
         //设置填充样式
         cxt.fillStyle=‘gray‘;

         cxt.fill();
         cxt.stroke();
         //画另一个小圆
         cxt.beginPath();
         cxt.arc(0,-150,5,0,360,false);
         cxt.closePath();
         //设置填充样式
         cxt.fillStyle=‘gray‘;

         cxt.fill();
         cxt.stroke();
         cxt.restore();
         }
         //使用定时器让表针动起来
         drawClock();
         setInterval(‘drawClock()‘,1000);
        </script>