H5画的简易时钟

小咪咪 2022-07-12 10:25 181阅读 0赞

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>时钟</title>  
<script type="text/javascript">  
//开始之前必须懂得时针各指针的弧度计算公式。  
var canvas,context;  
function window\_onload()\{  
    canvas = document.getElementById("myCanvas");  
    context = canvas.getContext("2d");  
    setInterval("draw()",1000);  
\}  
function draw()\{  
     ///得到当前系统时间的：时、分、秒  
      var now\_date=new Date();  
      var radius = Math.min(canvas.width/2,canvas.height/2),  
           sec=now\_date.getSeconds(),  
           min=now\_date.getMinutes(),  
           hour=now\_date.getHours();  
           hour=hour>=12?hour-12:hour;  
        
      //初始化画布  
      context.save();  
      context.clearRect(0,0,canvas.width,canvas.height);      
      context.translate(canvas.width/2,canvas.height/2);          
      context.scale(0.9,0.9);  
      context.rotate(-Math.PI/2);  
      context.save();  
  
      //小时刻度  
      context.strokeStyle="black";  
      context.fillStyle="black";  
      context.lineWidth=3;  
      context.lineCap="round";  
      context.beginPath();  
      for(var i=0;i<12;i++)\{  
        context.rotate(Math.PI/6);  
        context.moveTo(radius-30,0);  
        context.lineTo(radius-10,0);  
      \}  
      context.stroke();  
      context.restore();  
      context.save();  
        
      //分钟刻度  
      context.lineWidth=2;  
      context.beginPath();  
      for(var i=0;i<60;i++)\{  
        if(i%5!=0)\{  
          context.moveTo(radius-15,0);  
          context.lineTo(radius-10,0);  
        \}  
        context.rotate(Math.PI/30);  
      \}  
      context.stroke();  
      context.restore();  
      context.save();  
        
      //画上时针  
      context.rotate((Math.PI/6)\*hour+(Math.PI/360)\*min+(Math.PI/21600)\*sec);  
      context.lineWidth=6;  
      context.lineCap="butt";  
      context.beginPath();  
      context.moveTo(-10,0);  
      context.lineTo(radius\*0.5,0);  
      context.stroke();  
      context.restore();  
      context.save();  
        
      //分针  
      context.rotate((Math.PI/30)\*min+(Math.PI/1800)\*sec);  
      context.strokeStyle="\#29A8DE";  
      context.lineWidth=4;  
      context.lineCap="butt";  
      context.beginPath();  
      context.moveTo(-20,0);  
      context.lineTo(radius\*0.7,0);  
      context.stroke();  
      context.restore();  
      context.save();  
        
      //秒针  
      context.rotate(sec\*Math.PI/30);  
      context.strokeStyle="red";  
      context.lineWidth=2;  
      context.lineCap="butt";  
      context.beginPath();  
      context.moveTo(-30,0);  
      context.lineTo(radius\*0.9,0);  
      context.stroke();  
      context.restore();  
      context.save();  
        
      ///表框        
      context.lineWidth=4;  
      context.strokeStyle="gray";  
      context.beginPath();  
      context.arc(0,0,radius,0,Math.PI\*2,true);  
      context.stroke();  
      context.restore();  
      context.restore();  
\}  
</script>  
</head>  
<body onLoad="window\_onload()">  
    <canvas width="300" height="300" id="myCanvas"></canvas>  
</body>  
</html>

据博友要求，现补上效果图：