HTML5时钟制作代码

顺晟科技
2022-09-15 22:26:43
146
  1 <!doctype html>
  2    <meta charset="UTF-8">
  3    <html>
  4      <header></header>
  5      <body>
  6  
  7       <!--canvas标签画圆-->
  8        <canvas id="canvas" width="500" height="500">
  9                您的浏览器不支持canvas标签，无法看到时钟
 10        </canvas>
 11      <script>
 12 
 13       function drawClock(){
 14        
 15        //获取画布
 16        var canvas=document.getElementById('canvas');
 17        //创建context 对象
 18        var cxt=canvas.getContext("2d");
 19        //清除画布
 20         cxt.clearRect(0,0,500,500);
 21        var now =new Date();
 22        var sec=now.getSeconds();
 23        var min=now.getMinutes();
 24        var hour=now.getHours();
 25        //小时必须获取浮点类型(小时+分数转化成的小时)
 26        hour=hour+min/60;
 27        //问题 19:23:30
 28        //将24小时进制转换为12小时
 29        hour=hour>12?hour-12:hour;
 30        //刻度盘
 31        //设置画线的宽度
 32        cxt.lineWidth=10;
 33        //设置笔触的颜色
 34        cxt.strokeStyle="blue";
 35        //开始路径
 36        cxt.beginPath();
 37        //arc(x轴,y轴,半径,开始的度数,结束度数,是否顺时针);
 38        cxt.arc(250,250,200,0,180,false);
 39        //进行绘制
 40        cxt.stroke();
 41        //结束路径
 42        cxt.closePath();
 43         //时刻度
 44       for(var i=0;i<12;i++){
 45           //需要在异次元空间所有要保存画布
 46            cxt.save();
 47            //设置是真时针的宽度
 48            cxt.lineWidth=7;
 49            //设置时针的颜色
 50            cxt.strokeStyle="#000";
 51            //先设置0，0点
 52            cxt.translate(250,250);
 53            //在设置旋转的角度（弧度=角度*π/180）
 54            cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度，时针的间隔是30度
 55            //开始路径
 56            cxt.beginPath();
 57            //时针移动点
 58            cxt.moveTo(0,-170);
 59            //时针移动到
 60            cxt.lineTo(0,-190);
 61            //时针停止移动
 62            cxt.closePath();
 63            cxt.stroke();
 64            cxt.restore();
 65 
 66 
 67         }
 68        //秒刻度
 69       for(var i=0;i<60;i++){
 70           //需要在异次元空间所有要保存画布
 71            cxt.save();
 72            //设置是真时针的宽度
 73            cxt.lineWidth=4;
 74            //设置时针的颜色
 75            cxt.strokeStyle="#000";
 76            //先设置0，0点
 77            cxt.translate(250,250);
 78            //在设置旋转的角度（弧度=角度*π/180）
 79            cxt.rotate(i*6*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度
 80            //开始路径
 81            cxt.beginPath();
 82            //时针移动点
 83            cxt.moveTo(0,-180);
 84            //时针移动到
 85            cxt.lineTo(0,-190);
 86            //时针停止移动
 87            cxt.closePath();
 88            cxt.stroke();
 89            cxt.restore();
 90 
 91         }    
 92         //时针
 93        
 94            //需要在异次元空间保存所有画布
 95            cxt.save();
 96            //设置时针的宽度
 97            cxt.lineWidth=10;
 98            //设置时针的颜色
 99            cxt.strokeStyle="#000";
100            //先设置0，0点
101            cxt.translate(250,250);
102            //设置选择弧度
103            cxt.rotate(hour*30*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度
104            //开始路径
105            cxt.beginPath();
106            //时针移动点
107            cxt.moveTo(0,0);
108            //时针移动到
109            cxt.lineTo(0,-150);
110            //时针停止移动
111            cxt.closePath();
112            cxt.stroke();
113            cxt.restore();
114 
115        //分针
116        
117            //需要在异次元空间保存所有画布
118            cxt.save();
119            //设置分针的宽度
120            cxt.lineWidth=5;
121            //设置分针的颜色
122            cxt.strokeStyle="#000";
123            //先设置0，0点
124            cxt.translate(250,250);
125            //设置旋转弧度
126            cxt.rotate(min*30*Math.PI/180);//角度*Math.PI/180=弧度分针的间隔是6度
127            //开始路径
128            cxt.beginPath();
129            //时针移动点
130            cxt.moveTo(0,-150);
131            //时针移动到
132            cxt.lineTo(0,10);
133            //时针停止移动
134            cxt.closePath();
135            cxt.stroke();
136            cxt.restore();
137        //秒针
138            //需要在异次元空间中所有需要保存画布
139            cxt.save();
140            //设置分针的宽度
141            cxt.lineWidth=4;
142            //设置秒针的颜色
143            cxt.stroeStyle="red";
144            //先设置00点
145            cxt.translate(250,250);
146            //设置旋转角度角度的公式为角度*Math.PI/180
147            cxt.rotate(sec*6*Math.PI/180);
148            //时针开始移动
149            cxt.beginPath();
150            cxt.moveTo(0,-150);
151            cxt.lineTo(0,10);
152             //时针停止移动
153            cxt.closePath();
154            cxt.stroke();
155            //回到上一个状态,即 ctx.fillStyle="white";
156            cxt.restore();
157 
158           //使用setInterval(代码,毫秒时间)  让时钟动起来
159 }
160             drawClock();
161             setInterval(drawClock,1000);
162                     
163      </script>
164     
165     </body>
166 </html>
效果图： HTML5时钟制作代码
上一篇：如何修改html中列表项li所显示的下一篇：Html限制input输入框只能输入