html5写的一个时钟

浏览数：30 / 时间：2015年06月09日

看到的一个htm 技术分享 l5写的时钟

<!doctype>
<html>
<head>
  <script>
   window.onload=function(){
    var canvas=document.getElementById("myCanvas");
    var c=canvas.getContext("2d");//getContenText  返回一个绘图的环境，其中2d是目前唯一合法的字符  指的是 
    
    var drawClock=function(){
     
     c.clearRect(0,0,500,500);//清除画布,
     
     var now =new Date();
     var sec=now.getSeconds();
     var min=now.getMinutes();
     var hour=now.getHours();
     hour=hour+min/60;
     hour=hour>12?hour-12:hour;//21:36:21 把24小时转12小时制
     
     
     //表盘
     c.lineWidth=10;
     c.strokeStyle="blue";
     c.beginPath();
     c.arc(250,250,200,0,360,false);
     c.closePath();
     c.stroke();
     
     //1.刻度
     
     //1.1 时刻度
     c.lineWidth=7;
     c.strokeStyle="#000";
     for(var i=0;i<12;i++){     
      c.save();
      c.translate(250,250);
      c.rotate(i*30*Math.PI/180);
      c.beginPath();
      c.moveTo(0,-170);
      c.lineTo(0,-190);
      c.closePath();
      c.stroke();
      c.restore();
     }
     
     //1.2 分刻度
     c.lineWidth=5;
     c.strokeStyle="#000";
     for(var i=0;i<60;i++){     
      c.save();
      c.translate(250,250);
      c.rotate(i*6*Math.PI/180);
      c.beginPath();
      c.moveTo(0,-170);
      c.lineTo(0,-180);
      c.closePath();
      c.stroke();
      c.restore();
     }
     
     //2.1 时针    
     c.save();
     c.lineWidth=7;
     c.strokeStyle="#000";
     c.translate(250,250);
     c.rotate(hour*30*Math.PI/180);
     c.beginPath();
     c.moveTo(0,-100);
     c.lineTo(0,10);
     c.closePath();
     c.stroke();
     c.restore();
     
     //2.2 分针    
     c.save();
     c.lineWidth=5;
     c.strokeStyle="#333";
     c.translate(250,250);
     c.rotate( min*6*Math.PI/180);
     c.beginPath();
     c.moveTo(0,-140);
     c.lineTo(0,15);
     c.closePath();
     c.stroke();
     c.restore();
     
     //2.3 秒针    
     c.save();
     c.lineWidth=2;
     c.strokeStyle="red";
     c.translate(250,250);
     c.rotate(sec * 6 *Math.PI/180);
     c.beginPath();
     c.moveTo(0,-160);
     c.lineTo(0,20);
     c.closePath();
     c.stroke();     
     //圆心加个圆圈
     c.beginPath();
     c.arc(0,0,5,0,360,false);
     c.closePath();
     c.fillStyle="green";
     c.fill();
     //在秒针前端加个圆点
     c.beginPath();
     c.arc(0,-140,10,0,360,false);
     
     c.closePath();     
     c.fillStyle="red";
     c.fill();
     c.restore();
     
     //3 盘外时刻数字
    
     for(var i=1;i<13;i++){     
      c.save();
      c.lineWidth=5;
      c.strokeStyle="blue";
      c.font="40px 黑体";
      c.translate(250,250);
      c.rotate(i*30*Math.PI/180);
      c.beginPath();
      c.strokeText(""+i,-20,-210);
      c.closePath();
      c.stroke();
      c.restore();
     }
     
    }
    drawClock();
    setInterval(drawClock,1000);
   }
  </script>
</head>
<body>
  <canvas width="500" height="500" id="myCanvas" style="background-color:yellow">
     垃圾浏览器不支持canvas标签    
  </canvas> 
</body>
</html>