实现一个时钟的绘制和时间的显示
一，首先是页面的搭建html部分以及一点点的css代码，因为css这块用的比较少，所以就没有单独出来：
时钟
二，绘制时钟的js部分：
这里需要用到两个js文件
1，时钟js：
var can01;var ctx01;var can;var ctx;function init(){ can01=document.getElementById('canvas01'); ctx01=can01.getContext("2d"); can=document.getElementById('canvas'); ctx=can.getContext("2d"); time(); run();}//时间function time(){ window.requestAnimFrame(time); ctx01.clearRect(0,0,600,100); //清除上次的绘画 放在每次绘画之前 shuaxin();}//循环调用runfunction run(){ window.requestAnimFrame(run); drawbiaopan(); drawkedu(); biaozhen();}//画表盘function drawbiaopan(){ //arc(x,y,r,sAngle,eAngle,counterclockwise) //x,y圆的中心坐标，r圆的半径，sAngle,eAngle圆的起始终点， //counterclockwise可选，表示画圆逆时针还是顺时针False为顺时针，true为逆时针 ctx.clearRect(20,20,390,390); ctx.beginPath(); ctx.arc(200,200,180,0,2*Math.PI,false); ctx.lineWidth=5; ctx.strokeStyle="微软雅黑"; ctx.stroke(); ctx.closePath();}//画刻度盘function drawkedu(){ //时钟 for(var i=0;i<12;i++) { ctx.save(); ctx.translate(200,200); ctx.lineWidth=2; ctx.strokeStyle="green"; ctx.rotate(i*30*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-165); ctx.lineTo(0,-180); ctx.font="100 14px 宋体"; ctx.textAlign="left"; ctx.textBaseLine="top"; if(i==0){ ctx.strokeText(12,i*(-20)*Math.PI/120,-150); }else{ ctx.strokeText(i,i*(-20)*Math.PI/120,-150); } ctx.stroke(); ctx.closePath(); ctx.restore(); } //分钟 for(var i=0;i<60;i++) { ctx.save(); ctx.translate(200,200); ctx.lineWidth=1; ctx.strokeStyle="green"; ctx.rotate(i*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-170); ctx.lineTo(0,-180); ctx.stroke(); ctx.closePath(); ctx.restore(); }}//画表针function biaozhen(){ var now=new Date(); var sec=now.getSeconds(); var mins=now.getMinutes(); var hours=now.getHours(); hours=hours+mins/60+sec/3600; mins=mins+sec/60; //时针 ctx.save(); ctx.translate(200,200); ctx.lineWidth=3; ctx.strokeStyle="grey"; ctx.rotate(hours*30*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,-70);//圆心起点 ctx.stroke(); ctx.closePath(); ctx.restore(); //分针 ctx.save(); ctx.translate(200,200); ctx.lineWidth=2; ctx.strokeStyle="#000"; ctx.rotate(mins*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,0);//起点坐标 ctx.lineTo(0,-105);//终点坐标 ctx.stroke(); ctx.closePath(); ctx.restore(); //秒针 ctx.save(); ctx.translate(200,200); ctx.lineWidth=1; ctx.strokeStyle="red"; ctx.rotate(sec*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,-130);//圆心起点 ctx.stroke(); ctx.closePath(); ctx.restore();}function shuaxin(){ var now=new Date(); var sec=now.getSeconds(); var mins=now.getMinutes(); var hours=now.getHours(); ctx01.save(); ctx01.beginPath(); ctx01.fillStyle="red"; ctx01.strokeStyle="red" ctx01.font="bold 40px 微软雅黑"; //清除上次的时间 //这块代码有点冗余，但是还没有想到有什么好的处理办法，以后再改吧 if(hours<10){ if(mins<10){ if(sec<10){ //hours<10&&mins<10&&sec<10 ctx01.strokeText('本地时间：'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80); ctx01.fillText('本地时间：'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80); }else{ //hours<10&&mins<10&&sec>10 ctx01.strokeText('本地时间：'+'0'+hours+':'+'0'+mins+':'+sec,100,80); ctx01.fillText('本地时间：'+'0'+hours+':'+'0'+mins+':'+sec,100,80); } }else{ //hours<10&&mins>10&&sec<10 if(sec<10){ ctx01.strokeText('本地时间：'+'0'+hours+':'+mins+':'+'0'+sec,100,80); ctx01.fillText('本地时间：'+'0'+hours+':'+mins+':'+'0'+sec,100,80); }else{ //hours<10&&mins>10&&sec>10 ctx01.strokeText('本地时间：'+'0'+hours+':'+mins+':'+sec,100,80); ctx01.fillText('本地时间：'+'0'+hours+':'+mins+':'+sec,100,80); } } } else{ if(mins<10){ if(sec<10){ //hours>10&&mins<10&&sec<10 ctx01.strokeText('本地时间：'+hours+':'+'0'+mins+':'+'0'+sec,100,80); ctx01.fillText('本地时间：'+hours+':'+'0'+mins+':'+'0'+sec,100,80); }else{ //hours>10&&mins<10&&sec>10 ctx01.strokeText('本地时间：'+hours+':'+'0'+mins+':'+sec,100,80); ctx01.fillText('本地时间：'+hours+':'+'0'+mins+':'+sec,100,80); } }else{ if(sec<10){ //hours>10&&mins>10&&sec<10 ctx01.strokeText('本地时间：'+hours+':'+mins+':'+'0'+sec,100,80); ctx01.fillText('本地时间：'+hours+':'+mins+':'+'0'+sec,100,80); }else{ //hours>10&&mins>10&&sec>10 ctx01.strokeText('本地时间：'+hours+':'+mins+':'+sec,100,80); ctx01.fillText('本地时间：'+hours+':'+mins+':'+sec,100,80); } } } ctx01.closePath(); ctx01.restore();}
2，做了兼容的requestAnimitionFrame循环函数
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { return window.setTimeout(callback, 1000 / 60); }; })();