canvas 画简易时钟

  • 内容
  • 相关

canvas 画简易时钟 

(钟表时钟+数字时钟同步显示)

这次极强实验室跟大家分享的是一个用canvas写的简易时钟,话不多说,直接上效果图:


效果还不错吧!代码如下:

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title></title>

  6. <style type="text/css">

  7.     #clock{

  8.         width: 500px;

  9.         height: 500px;

  10.         margin: 100px auto 0;

  11.         

  12.     }

  13.     #cvs{

  14.         border: 1px solid chocolate;

  15.     }

  16. </style>

  17. </head>

  18. <body>

  19.     <div id="clock">

  20.         <canvas id="cvs" width="500" height="500"></canvas>

  21.     </div>

  22.     

  23. </body>

  24. <script type="text/javascript">

  25.     var cvs = document.getElementById("cvs")

  26.     var ctx = cvs.getContext('2d')

  27.     

  28.     function click(){

  29.         //时钟圆盘

  30.         ctx.beginPath()

  31.         ctx.strokeStyle ='red'

  32.         ctx.lineWidth = 8

  33.         ctx.arc(250,250,200,0,2*Math.PI,true)

  34.         ctx.closePath()

  35.         ctx.stroke()

  36.         

  37.         ctx.globalCompositeOperation='destination-over'

  38.         //时刻度

  39.         for(var i=0;i<12;i++){

  40.             ctx.save();

  41.             ctx.beginPath();

  42.             ctx.translate(250,250);

  43.             ctx.rotate(i*30*Math.PI/180);

  44.             ctx.strokeStyle ='#00D6B2';

  45.             ctx.lineWidth=6;

  46.             ctx.moveTo(0,-175);

  47.             ctx.lineTo(0,-200);

  48.             

  49.             ctx.stroke()

  50.             ctx.closePath();

  51.             ctx.restore()

  52.         };

  53.         //分刻度

  54.         for(var i=0;i<60;i++){

  55.             ctx.save();

  56.             ctx.beginPath();

  57.             ctx.translate(250,250);

  58.             ctx.rotate(i*6*Math.PI/180);

  59.             ctx.strokeStyle ='#FEF319';

  60.             ctx.lineWidth=4;

  61.             ctx.moveTo(0,-185);

  62.             ctx.lineTo(0,-200);

  63.             ctx.stroke()

  64.             ctx.closePath();

  65.             ctx.restore()

  66.         };

  67.         //画小时数

  68.         var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

  69.         

  70.         hour.forEach(function(num,i){

  71.             var rad = 2 * Math.PI / 12 * i;

  72.             var x = Math.cos(rad) * 160;

  73.             var y = Math.sin(rad) * 160;

  74.           //  console.log(x,y)

  75.             ctx.font = "18px sans-serif"

  76.             ctx.textAlign = "center";

  77.             ctx.textBaseline = "middle";

  78.             ctx.fillStyle='#FF0000';

  79.             ctx.fill();

  80.             ctx.fillText(num, x+250, y+250);

  81.         });

  82.         //获取当前时间

  83.         var oDate = new Date

  84.         var hour = oDate.getHours()

  85.         var minutes = oDate.getMinutes()

  86.         var seconds = oDate.getSeconds()

  87.     

  88. //        console.log(hour,minutes,seconds)

  89.         if(hour>12){

  90.             hour = hour-12;

  91.             hour = hour+minutes/60;

  92.         }

  93.         minutes = minutes + seconds/60;

  94.         //console.log(hour,minutes,seconds)

  95.         

  96.         //时针

  97.         ctx.save();

  98.         ctx.beginPath();

  99.         ctx.translate(250,250);

  100.         ctx.rotate(hour*30*Math.PI/180);

  101.         ctx.strokeStyle ='#F44336';

  102.         ctx.lineWidth=9;

  103.         ctx.moveTo(0,15);

  104.         ctx.lineTo(0,-90);

  105.         ctx.stroke()

  106.         ctx.closePath();

  107.         ctx.restore()

  108. //        

  109.         //分针

  110.         ctx.save();

  111.         ctx.beginPath();

  112.         ctx.translate(250,250);

  113.         ctx.rotate(minutes*6*Math.PI/180);

  114.         ctx.strokeStyle ='#A2D866';

  115.         ctx.lineWidth=6;

  116.         ctx.moveTo(0,20);

  117.         ctx.lineTo(0,-130);

  118.         ctx.stroke()

  119.         ctx.closePath();

  120.         ctx.restore()

  121.         //秒针

  122.         ctx.save();

  123.         ctx.beginPath();

  124.         ctx.translate(250,250);

  125.         ctx.rotate(seconds*6*Math.PI/180);

  126.         ctx.strokeStyle ='#F0AD4E';

  127.         ctx.lineWidth=3;

  128.         ctx.moveTo(0,25);

  129.         ctx.lineTo(0,-150);

  130.         ctx.stroke()

  131.         ctx.closePath();

  132.         ctx.restore()

  133.         

  134.         

  135.         ctx.globalCompositeOperation='source-over'

  136.         //中心圆

  137.         ctx.beginPath()

  138.         ctx.fillStyle='#60D9F8';

  139.         ctx.strokeStyle='#00B7FF';

  140.         ctx.lineWidth = 3;

  141.         ctx.arc(250,250,8,0,2*Math.PI,true);

  142.         ctx.fill();

  143.         ctx.stroke();

  144.         ctx.closePath();

  145.         ctx.restore();

  146.         

  147.         

  148.         //画时间

  149.         var h2=oDate.getHours();

  150.         var m2=oDate.getMinutes();

  151.         var str1=h2>9?h2:('0'+h2);

  152.         var str2=m2>9?m2:('0'+m2);

  153.         ctx.beginPath();

  154.         ctx.fillStyle='#FB1F11';

  155.         ctx.font='26px 微软雅黑';

  156.         ctx.fillText(str1+':'+str2,250,340);

  157.         ctx.closePath();

  158.         

  159.     }    

  160.     setInterval(function(){

  161.         ctx.clearRect(0,0,cvs.width,cvs.height)

  162.         click()

  163.     },1000)

  164. </script>



本文标签:这篇文章木有标签

版权声明:若无特殊注明,本文皆为《晶天》原创,转载请保留文章出处。

本文链接:canvas 画简易时钟 - https://www.jqlab.cn/post-741.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注