html5的canvas实现实时时钟

最新推荐文章于 2021-02-03 18:03:31 发布

ic_cdd

最新推荐文章于 2021-02-03 18:03:31 发布

阅读量481

点赞数

本文链接：https://blog.csdn.net/qq_36153397/article/details/65447975

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>时钟模拟</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
   body{background: black;}
   #c1{background: white;}
</style>
<script type="text/javascript">
   window.onload = function(){
       var oC = document.getElementById('c1');
       var oGC = oC.getContext('2d');
       function Draw(){
           //规定中心位置，半径
           var x = 200;
           var y = 200;
           var r = 150
           //获取系统时间
           var oDate = new Date();
           var oHour = oDate.getHours();
           var oMin = oDate.getMinutes();
           var oSec = oDate.getSeconds();

           //计算三针走的弧度,注意24制和12制都是一样的，只是24制的多走360°
           //注意分钟走180°，时针要多走15°
           var oHourValue = (-90 + oHour*30 + oMin/2)*Math.PI/180;
           var oMinValue = (-90 + oMin*6)*Math.PI/180;
           var oSecValue = (-90 + oSec*6)*Math.PI/180;

           //画出分钟刻度大圆,共60格，每格6度
           for(var i = 0; i<60; i++){
               oGC.beginPath();
               oGC.moveTo(x,y);
               oGC.arc(x, y, r, 6*i*Math.PI/180, 6*(i+1)*Math.PI/180, false);
               oGC.closePath();
               oGC.stroke();//这是描边函数

           }
           oGC.fillStyle = 'white';


           //绘制小时的刻度,12格，每格30°
           oGC.lineWidth = 3;
           for(var i = 0; i<12; i++){
               oGC.beginPath();
               oGC.moveTo(x,y);
               oGC.arc(x, y, r, 30*i*Math.PI/180, 30*(i+1)*Math.PI/180, false);
               oGC.closePath();
               oGC.stroke();//这是描边函数

           }
           //挡住中间的圆
           oGC.beginPath();
           oGC.moveTo(x, y);
           oGC.arc(x, y, r*19/20,0,360*Math.PI/180, false);
           oGC.closePath();
           oGC.fill();//这是填充函数

           //画出时针
           oGC.lineWidth = 5;
           oGC.beginPath();
           oGC.moveTo(x,y);
           oGC.arc(x, y, r*10/20, oHourValue, oHourValue);
           oGC.closePath();
           oGC.stroke();

           //画出分针
           oGC.lineWidth = 3;
           oGC.beginPath();
           oGC.moveTo(x,y);
           oGC.arc(x, y, r*15/20, oMinValue, oMinValue);
           oGC.closePath();
           oGC.stroke();

           //画出秒针
           oGC.lineWidth = 1;
           oGC.beginPath();
           oGC.moveTo(x,y);
           oGC.arc(x, y, r*18/20, oSecValue, oSecValue);
           oGC.closePath();
           oGC.stroke();

           //计时器，不断刷新
           setInterval(Draw,1000);//单位是毫秒



       }
       Draw();

   }
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">

</canvas>
</body>
</html>

ic_cdd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5的canvas实现实时时钟

时钟模拟 body{background: black;} #c1{background: white;} window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d');
复制链接

扫一扫