首页 > 其他分享> > canvas+js画时钟

canvas+js画时钟

2022-01-20 18:58:58 作者：互联网

以下代码可供参考。

<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