HTML5小時鐘 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Time</title> 
<script type="text/javascript"> 
window.onload=function(){
      clock();
      setInterval(clock,1000);///每一秒钟重新绘制一次
    };
    function clock(){
      ///得到时分秒
      var now=new Date();
      var sec=now.getSeconds(),min=now.getMinutes(),hour=now.getHours();
      hour=hour>=12?hour-12:hour;
      var c=document.getElementById("myCanvas").getContext("2d");
      
      c.save();
      c.clearRect(0,0,150,150);    ///初始化画布
      c.translate(75,75);        
      c.scale(0.4,0.4);
      c.rotate(-Math.PI/2);
      
      c.strokeStyle="black";
      c.fillStyle="black";
      c.lineWidth=8;
      c.lineCap="round";

      c.save();
      c.strokeStyle="#330066";
      c.beginPath();
      for(var i=0;i<12;i++){///小时刻度
        c.rotate(Math.PI/6);
        c.moveTo(100,0);
        c.lineTo(120,0);
      }
      c.stroke();
      c.restore();
      c.save();
      
      c.lineWidth=5;
      c.beginPath();
      for(var i=0;i<60;i++){///分钟刻度
        if(i%5!=0){
          c.moveTo(117,0);
          c.lineTo(120,0);
        }
        c.rotate(Math.PI/30);
      }
      c.stroke();
      c.restore();
      c.save();
      
      c.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);///画上时针
      c.lineWidth=12;
      c.strokeStyle="black";
      c.beginPath();
      c.moveTo(-20,0);
      c.lineTo(75,0);
      c.stroke();
      c.restore();
      c.save();
      
      c.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);///分针
      c.strokeStyle="#29A8DE";
      c.lineWith=10;
      c.beginPath();
      c.moveTo(-28,0);
      c.lineTo(102,0);
      c.stroke();
      c.restore();
      c.save();
      
      c.rotate(sec*Math.PI/30);///秒针
      c.strokeStyle="#D40000";
      c.lineWidth=6;
      c.beginPath();
      c.moveTo(-30,0);
      c.lineTo(83,0);
      c.stroke();
      c.restore();
      c.save();
      ///表框      
      c.lineWidth=14;
      c.strokeStyle="#325FA2";
      c.beginPath();
      c.arc(0,0,142,0,Math.PI*2,true);
      c.stroke();
      c.restore();
      c.restore();
    }
</script> 
</head> 
<body> 
<canvas id="myCanvas" width="200" height="200" ></canvas>
</body> 
</html>

 

posted @ 2015-02-27 10:36  狂想NICE  阅读(310)  评论(0)    收藏  举报