纯html5打造的时钟
浏览数：27 /
时间：2015年06月09日
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 window.onload = function(){ 8 var oC = document.getElementById(‘ch1‘); 9 var oGC = oC.getContext(‘2d‘); 10 11 function drawClock(){ 12 var x = 200; //指定坐标 13 var y = 200; 14 var r = 150; //指定钟表半径 15 16 oGC.clearRect(0,0,oC.width,oC.height);//清空画布 17 18 var oDate = new Date(); //创建日期对象 19 var oHours = oDate.getHours();//获取时间 20 var oMin = oDate.getMinutes(); 21 var oSen = oDate.getSeconds(); 22 23 var oHoursValue = (-90 + oHours*30 + oMin/2)*Math.PI/180; //设置时针的值 24 var oMinValue = (-90 + oMin*6)*Math.PI/180; 25 var oSenValue = (-90 + oSen*6)*Math.PI/180; 26 27 oGC.beginPath();//开始 28 29 for(var i=0;i<60;i++){ //i为60，代表着时钟的60个小刻度 30 oGC.moveTo(x,y); 31 oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); //循环从6度到12度 32 } 33 oGC.closePath(); 34 oGC.stroke(); 35 36 oGC.fillStyle =‘white‘; //覆盖住小刻度的黑色线 37 oGC.beginPath(); 38 oGC.moveTo(x,y); 39 oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false); 40 41 oGC.closePath();//结束 42 oGC.fill(); 43 44 oGC.lineWidth = 3; //设置时钟圆盘大刻度的粗细值 45 oGC.beginPath(); //开始画大的时钟刻度 46 47 for(i=0;i<12;i++){ //i为12，代表着时钟刻度的12大格 48 oGC.moveTo(x,y); 49 oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); // 间隔为30度，弧度=角度*Math.PI/180 50 } 51 oGC.closePath(); 52 oGC.stroke(); 53 54 oGC.fillStyle =‘white‘; //覆盖住大刻度的黑色线 55 oGC.beginPath(); 56 oGC.moveTo(x,y); 57 oGC.arc(x,y,r*18/20,360*(i+1)*Math.PI/180,false); 58 59 oGC.closePath(); 60 oGC.fill();//表盘完成 61 62 oGC.lineWidth = 5;//设置时针宽度 63 oGC.beginPath();//开始绘制时针 64 oGC.moveTo(x,y); 65 66 oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//设置时针大小和弧度 67 oGC.closePath(); 68 oGC.stroke(); 69 70 oGC.lineWidth = 3;//设置分针宽度 71 oGC.beginPath();//开始绘制分针 72 oGC.moveTo(x,y); 73 74 oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//设置分针大小和弧度 75 oGC.closePath(); 76 oGC.stroke(); 77 78 oGC.lineWidth = 1;//设置秒针宽度 79 oGC.beginPath();//开始绘制秒针 80 oGC.moveTo(x,y); 81 82 oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//设置秒针大小和弧度 83 oGC.closePath(); 84 oGC.stroke(); 85 } 86 setInterval(drawClock,1000);//设置定时器，让时钟运转起来 87 drawClock(); 88 }; 89 </script> 90 </head> 91 <body> 92 <canvas id = "ch1" width = "400px" height = "400px"></canvas> 93 </body> 94 </html>
自己写的html5时钟，欢迎指教！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
