caavas ---个性时钟

Posted 瞅我干啥？

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了caavas ---个性时钟相关的知识，希望对你有一定的参考价值。

 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>document</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>

 

以上是关于caavas ---个性时钟的主要内容，如果未能解决你的问题，请参考以下文章