html5时钟

最新推荐文章于 2025-09-11 21:03:21 发布

转载最新推荐文章于 2025-09-11 21:03:21 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sallency/blog/210690

文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>>

看了下兄弟连的html5的视频教程，用canvas画布来绘制时钟，2015/03/06做了一些修正

<!doctype html>
 
<html>
 
 <head>
 
  <title>Canvas Clock</title>
 
  <style type="text/css">
 
  </style>
 
 </head>
 
 <body style="text-align:center;">
 
  <h2>
 
   <span style="color: yellow;font-family:arials">
 
   Canvas Clock
 
   </span>
 
  </h2>
 
  <canvas id="clock" width="500" height="500">
 
   您的浏览器不支持canvas标签，无法看到时钟
 
  </canvas>
 
  <script>
 
   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();
 
   //小时必须获取浮点类型(小时+分数转化成的小时)
 
   hour=hour+min/60;
 
   //问题 19:23:30
 
   //将24小时进制转换为12小时
 
   hour=hour>12?hour-12:hour;
 
    
 
   //表盘
 
   cxt.lineWidth=10;
 
   cxt.strokeStyle="rgba(0,200,0,0.5)";
 
   cxt.beginPath();
 
   cxt.arc(250,250,200,0,Math.PI*2,false);
 
   cxt.closePath();
 
   cxt.stroke();
 
   //刻度
 
    //时刻度
 
    for(var i=0;i<12;i++){
 
     cxt.save();
 
     //设置时针的粗细
 
     cxt.lineWidth=7;
 
     //设置时针的颜色
 
     cxt.strokeStyle="#000";
 
     //先设置0,0点
 
     cxt.translate(250,250);
 
     //再设置旋转角度
 
     cxt.rotate(i*30*Math.PI/180);//角度*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.lineWidth=5;
 
     //设置颜色(使用时刻度的颜色)
 
     cxt.strokeStyle="#000";
 
     //设置或者重置画布的0，0点
 
     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";
 
    //设置异次元空间的0，0点
 
    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.strokeStyle="red";
 
    //粗细 3像素
 
    cxt.lineWidth=3;
 
    //重置0，0点
 
    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,Math.PI*2,false);
 
    cxt.closePath();
 
    //设置填充样式
 
    cxt.fillStyle="gray";
 
    cxt.fill();
 
    //设置笔触样式(秒针已设置)
 
    cxt.stroke();
 
    //设置秒针前段的小圆点
 
    cxt.beginPath();
 
    cxt.arc(0,-150,5,0,Math.PI*2,false);
 
    cxt.closePath();
 
    //设置填充样式
 
    cxt.fillStyle="gray";
 
    cxt.fill();
 
    //设置笔触样式(秒针已设置)
 
    cxt.stroke();
 
    cxt.restore();
 
   }
 
   //使用setInterval(代码,毫秒时间)  让时钟动起来
 
   drawClock();
 
   //1秒钟画一次
 
   setInterval(drawClock,1000);
 
  </script>
 
 </body>
 
</html>

转载于:https://my.oschina.net/sallency/blog/210690