如何在JavaScript中使用帆布绘制一个圆形时钟效果

  介绍

这期内容当中小编将会给大家带来有关如何在JavaScript中使用帆布绘制一个圆形时钟效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

具体内容如下

& lt; ! DOCTYPE  html>   & lt; html>   & lt;才能head>   ,,,& lt; meta  charset=皍tf-8",/比;   ,,,& lt; title> Canvas  Clock   ,,,& lt; style 类型=拔谋?css"比;      ,,,,,div {   ,,,,,,,text-align:,中心;   ,,,,,,,margin-top:, 250 px;   ,,,,,}   ,,,,,{#时钟      ,,,,,,,边界:,1 px  solid  # ccc;   ,,,,,}   ,,,& lt;/style>   & lt;才能/head>   & lt;才能body>   ,,,& lt; div>   ,,,,,& lt; canvas  id=癱lock",身高=?00 px",宽度=?00 px"祝辞& lt;/canvas>   ,,,& lt;/div>      ,,,& lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" js/clock.js ">      

js

var  dom=. getelementbyid(& # 39;时钟# 39;);   var  cxt=dom.getContext (“2 d");   var 宽度=cxt.canvas.width;   var 身高=cxt.canvas.height;   var  r=宽/2;      function  drawBackground () {   cxt.save才能();   cxt.translate才能(r, r);   cxt.beginPath才能();   cxt.lineWidth才能=10;   cxt.arc才能(0,0,r-5 0 2 * Math.PI,假);   cxt.stroke才能();   cxt.font才能=?8 px  Arial";   cxt.textAlign才能=& # 39;中心# 39;   cxt.textBaseline才能=& # 39;中间# 39;   var 才能;hourNums=(3, 4, 5, 6, 7, 8, 9, 10, 11, 12日,1,2);   hourNums.forEach才能(函数(号码,我){      ,,,var  rad=2 * Math.PI/12 *我;   ,,,var  x=Math.cos (rad) * (r-30);   ,,,var  y=sin (rad) * (r-30);   ,,,cxt.fillText(数,x, y);      ,,});      ,,(var 我=0;i<60;我+ +){      ,,,var  rad=2 * Math.PI/60 *我;   ,,,var  x=Math.cos (rad) * (r-18);   ,,,var  y=sin (rad) * (r-18);   ,,,cxt.beginPath ();   ,,,如果(小姐:%,5===0){   ,,,,,cxt.fillStyle=? 000“   ,,,,,cxt.arc (x, y, 2 0 2 * Math.PI,假);   ,,,}   其他,,,{   ,,,,,cxt.fillStyle=? ccc"   ,,,,,cxt.arc (x, y, 2 0 2 * Math.PI,假);   ,,,}   ,,,cxt.fill (),,   ,,}      }      function  drawHour(小时、分钟){   cxt.save才能();   cxt.beginPath才能();   var 才能;rad=2 * Math.PI/12 *小时;   var 才能mrad=2 * Math.PI/12/60 *分钟   cxt.rotate才能(rad + mrad);   cxt.lineWidth才能=6;   cxt.lineCap=& # 39;才能轮# 39;   cxt.moveTo才能(0,10);   cxt.lineTo才能(0,- r/2);   cxt.stroke才能();   cxt.restore才能();   }      function  drawMinute(分钟){   cxt.save才能();   cxt.beginPath才能();   var 才能;rad=2 * Math.PI/60 *分钟;   cxt.rotate才能(rad);   cxt.lineWidth才能=3;   cxt.lineCap=& # 39;才能轮# 39;   cxt.moveTo才能(0,10);   cxt.lineTo才能(0,- r + 30);   cxt.stroke才能();   cxt.restore才能();   }      function  drawSecond(秒){   cxt.save才能();   cxt.beginPath才能();   cxt.fillStyle才能=& # 39;# c14543& # 39;   var 才能;rad=2 * Math.PI/60 *第二;   cxt.rotate才能(rad);,,   cxt.moveTo才能(20);   cxt.lineTo才能(20);   cxt.lineTo才能(1,- r + 18);   cxt.lineTo才能(1,- r + 18);   cxt.fill才能();   cxt.restore才能();   }      function  drawDot () {      cxt.beginPath才能();   cxt.fillStyle才能=& # 39;# fff& # 39;   cxt.arc才能(0 0 3 0 2 * Math.PI,假);   cxt.fill才能();   }      function 画(){      cxt.clearRect才能(0,0,宽度、高度);   var 才能;现在=new 日期();   var 才能;小时=now.getHours ();   var 才能;分钟=now.getMinutes ();   var 才能;其次=now.getSeconds ();   drawBackground才能();   drawHour才能(小时、分钟);   drawMinute才能(分钟);   drawSecond才能(第二次);   drawDot才能();   cxt.restore才能();   }   画();   setInterval(画,1000);

上述就是小编为大家分享的如何在JavaScript中使用帆布绘制一个圆形时钟效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。

如何在JavaScript中使用帆布绘制一个圆形时钟效果