canvas+js画时钟

2022-01-20 18:58:58 阅读：185 来源： 互联网

标签：canvas ctx js stroke arc var beginPath Math 时钟

以下代码可供参考。

<body>
       <canvas id="mc" width="300px" height="300px"></canvas>
       <script type="text/javascript">
           var canvas=document.getElementById("mc");
           var ctx=canvas.getContext('2d');/*获取画笔*/
           var x=canvas.width/2;
           var y=(canvas.height/2);/*圆心*/

           ctx.beginPath();
       ctx.arc(x,y,150,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
       ctx.stroke();

           /*分钟刻度*/
           var angle=(2*Math.PI/60);/*360°/60=6°*/
           for(var i=0;i<60;i++){/*画60个刻度*/
               var star=i*angle;
               var end=(i+1)*angle;
               ctx.beginPath();/*开始路径*/
               ctx.moveTo(x,y);
               ctx.arc(x,y,150,star,end);
               ctx.stroke();
           }

           /*遮罩*/
           ctx.beginPath();
           ctx.strokeStyle='white';
          ctx.arc(x,y,140,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
          ctx.fillStyle='white';/*背景色为白色*/
          ctx.fill();
       ctx.stroke();


           /*时钟刻度*/
           var angle=(2*Math.PI/12);/*360/12*/
           for(var i=0;i<12;i++){/*画60个刻度*/
               var star=i*angle;
               var end=(i+1)*angle;
               ctx.beginPath();/*开始路径*/
               ctx.strokeStyle='black';
               ctx.moveTo(x,y);
               ctx.arc(x,y,150,star,end);
               ctx.stroke();
           }

           function time1(){
           /*遮罩*/
           ctx.beginPath();
           ctx.strokeStyle='white';
          ctx.arc(x,y,130,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
          ctx.fillStyle='white';/*背景色为白色*/
          ctx.fill();
       ctx.stroke();

           /**/


           var date=new Date();
       var h=date.getHours();
       var m=date.getMinutes();
       var s=date.getSeconds();
           if(h>12){
           h=h-12;
       }
       console.log(h);

       var secondAngle =((s*6-90)*(Math.PI)/180) ; //计算出来秒针的弧度
       var minuteAngle =((m*6-90)*(Math.PI)/180+(secondAngle/60)); //计算出来分针的弧度
       var hourAngle =((h*30-90)*(Math.PI)/180 +(minuteAngle/12)); //计算出来时针的弧度


           /*秒针*/
           ctx.beginPath();
           ctx.strokeStyle='red';
ctx.moveTo(x, y);
ctx.arc(x, y, 120, secondAngle, secondAngle);
ctx.stroke();

           /*分针*/
           ctx.beginPath();
           ctx.strokeStyle='blue';
ctx.moveTo(x, y);
ctx.arc(x, y, 90, minuteAngle, minuteAngle);
ctx.stroke();

/*时针*/
           ctx.beginPath();
           ctx.strokeStyle='black';
ctx.moveTo(x, y);
ctx.arc(x, y,60, hourAngle, hourAngle);
ctx.stroke();

//画中心圆点
ctx.beginPath();
ctx.strokeStyle='black';
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.stroke();
           }
           time1();
           setInterval(time1,1000);




       </script>
   </body>

标签：canvas,ctx,js,stroke,arc,var,beginPath,Math,时钟
来源： https://blog.csdn.net/m0_57767772/article/details/122607959

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas+js画时钟