首页 > 代码库 > caavas ---个性时钟
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 ---个性时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。