玩转html5（四）----使用canvas画一个时钟

最新推荐文章于 2022-05-09 15:03:41 发布
china_skag
最新推荐文章于 2022-05-09 15:03:41 发布
阅读量769
点赞数
分类专栏： HTML5
HTML5 专栏收录该内容
39 篇文章 0 订阅
订阅专栏
先给个效果图，我画的比较丑，大家可以自己美化一下，
直接上代码：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
   <body>
   	  <canvas  width="500" height="500" id="clock" >  
   	         您的浏览器不支持canvas
   	  </canvas>
   	  <script>
           //获取画布
           var clock=document.getElementById('clock');
           //设置绘图环境
           var cxt=clock.getContext('2d');  

       function drawClock(){    
       	   //清除画布
       	   cxt.clearRect(0,0,500,500);
           //获取时间，
            var now =new Date();
            var second =now.getSeconds();
            var minute =now.getMinutes();
            var hour1 =now.getHours();
            //将24小时进制转为12小时，且为浮点型
            var hour=hour1+minute/60;
            hour=hour>12 ?hour-12:hour;
            //获取全部时间
            var time=now.toLocaleString( );
            
           //表盘
                //开始新路径
                cxt.beginPath();
                cxt.lineWidth=8;
                cxt.strokeStyle="blue";
                //路径函数 x,y,r,角度范围,顺时针/逆时针
                cxt.arc(250,250,200,0,360,false);
                cxt.stroke(); 
                cxt.closePath();
            //刻度,利用旋转
               //时刻度
                for(var i=0;i<12;i++){
                	//保存当前状态
                    cxt.save();
                    //刻度粗细
                     cxt.lineWidth=5;
                    //刻度颜色
                    cxt.strokeStyle="black"
                    //设置00点,以画布中心为00
                    cxt.translate(250,250);
                    //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
                    cxt.rotate(i*30*Math.PI/180);
                    cxt.beginPath();
                    //刻度起始点
                    cxt.moveTo(0,-180);
                    //刻度结束点
                    cxt.lineTo(0,-195);
                    cxt.closePath();
                    cxt.stroke();
                    //将旋转后的图片返回原画布
                    cxt.restore();
                }

               //分刻度
                 for(var i=0;i<60;i++){
                	//保存当前状态
                    cxt.save();
                    //刻度粗细
                    cxt.lineWidth=3;
                    //刻度颜色
                    cxt.strokeStyle="black"
                    //设置00点,以画布中心为00
                    cxt.translate(250,250);
                    //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
                    cxt.rotate(i*6*Math.PI/180);
                    cxt.beginPath();
                    //起始点
                    cxt.moveTo(0,-188);
                    cxt.lineTo(0,-195);
                    cxt.closePath();
                    cxt.stroke();
                    //将旋转后的图片返回原画布
                    cxt.restore();
                }
            //表盘中心
                cxt.beginPath();
                cxt.lineWidth=1;
                cxt.strokeStyle="red";
                cxt.fillStyle="red";
                //路径函数 x,y,r,角度范围,顺时针/逆时针
                cxt.arc(250,250,4,0,360,false);
                cxt.fill();
                cxt.stroke(); 
                cxt.closePath();
            //时针
                //保存当前状态
                 cxt.save();
                 cxt.lineWidth=5;
                 cxt.strokeStyle="black";
                 //设置异次元空间00点
                 cxt.translate(250,250);
                 //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
                 cxt.rotate(hour*30*Math.PI/180);
                 cxt.beginPath();     
                 cxt.moveTo(0,-120);
                 cxt.lineTo(0,10);
                 cxt.closePath();
                 cxt.stroke();
                 cxt.restore();
            //分针
                 cxt.save();
                 cxt.lineWidth="3";
                 cxt.strokeStyle="black";
                 cxt.translate(250,250);
                 cxt.rotate(minute*6*Math.PI/180);
                 cxt.beginPath();     
                 cxt.moveTo(0,-150);
                 cxt.lineTo(0,15);
                 cxt.closePath();
                 cxt.stroke();
                 cxt.restore();
            //秒针
                 cxt.save();
                 cxt.lineWidth="1.5";
                 cxt.strokeStyle="red";
                 cxt.translate(250,250);
                 cxt.rotate(second*6*Math.PI/180);
                 cxt.beginPath();     
                 cxt.moveTo(0,-160);
                 cxt.lineTo(0,20);
                 cxt.closePath();
                 cxt.stroke();
                 //秒针前端小点
                 cxt.beginPath();
                 //外环为红色
                 cxt.strokeStyle="red";
                 //灰色填充
                 cxt.fillStyle="gray";
                 cxt.arc(0,-145,4,0,360,false);
                   cxt.fill();
                 cxt.closePath();
                 cxt.stroke();
                 cxt.restore();
            //表盘中心
                cxt.beginPath();
                cxt.lineWidth=1;
                //外环为红色
                cxt.strokeStyle="red";
                //灰色填充
                cxt.fillStyle="gray";
                //路径函数 x,y,r,角度范围,顺时针/逆时针
                cxt.arc(250,250,4,0,360,false);
                cxt.fill();
                cxt.stroke(); 
                cxt.closePath();
            //写时间    
                cxt.font="15px 黑体 ";
                 cxt.fillStyle="black";
                //实心字
                cxt.fillText(time,160,150);
           }      
           //使用setInterval(代码，毫秒时间)使时钟转起来;
           drawClock();
           setInterval(drawClock,1000);


   	  </script>
   </body>
</html>