1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 <style> 10 *{ 11 padding:0; 12 margin:0; 13 } 14 html,body{ 15 100%; 16 height:100%; 17 overflow: hidden; 18 background: #000; 19 } 20 canvas{ 21 background:#fff; 22 } 23 span{ 24 font-size: 50px; 25 } 26 </style> 27 <script> 28 function d2a(n){ 29 n-=90; 30 return n*Math.PI/180; 31 } 32 window.onload=function(){ 33 var c=document.getElementsByTagName('canvas')[0]; 34 var str='时钟'; 35 //准备画笔 36 var gd=c.getContext('2d'); 37 gd.lineWidth=20; 38 39 function drawArc(start,end,r,color){ 40 gd.beginPath(); 41 gd.strokeStyle=color; 42 gd.arc(200,200,r,d2a(start),d2a(end),false); 43 gd.stroke(); 44 } 45 function clock(){ 46 gd.clearRect(0,0,c.width,c.height) 47 var oDate=new Date(); 48 var h=oDate.getHours(); 49 var m=oDate.getMinutes(); 50 var s=oDate.getSeconds(); 51 var ms=oDate.getMilliseconds(); 52 //秒 53 drawArc(0,s*6+ms/1000*6,100,'red'); 54 //分 55 drawArc(0,m*6,80,'blue'); 56 //时 57 drawArc(0,h%12*30,60,'green'); 58 //画字 59 gd.font='50px a'; 60 gd.textAlign='center'; 61 gd.textBaseline='bottom'; 62 gd.fillText(str,200,90); 63 64 gd.font='20px a'; 65 gd.fillText(h+':'+m+':'+s,200,200); 66 } 67 68 setInterval(clock,16) 69 clock(); 70 }; 71 </script> 72 </head> 73 <body> 74 <canvas width="800" height="500"> 75 <span>你的浏览器不支持canvas</span> 76 </canvas> 77 </body> 78 </html>