canvas+js画时钟

以下代码可供参考。

<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>

上一篇:svg+css圆环动效


下一篇:教你快速学会容器镜像服务账号开通