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 width: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>
浙公网安备 33010602011771号