练习啥也不说记录个
<!doctype html> <html> <head></head> <body> <canvas width="500" height="500" style="background:yellow" id="clock"> 你的浏览器不支持canvas标签 </canvas> <script> var clock=document.getElementById('clock'); var cxt=clock.getContext('2d'); //画表盘 function drawPan(){ cxt.beginPath(); cxt.lineWidth=8; cxt.strokeStyle="blue"; cxt.beginPath(); cxt.arc(250,250,200,0,360,false); cxt.stroke(); cxt.closePath(); } //画刻度 function KeDu(i,width,x,y,mX,mY,tX,tY,rotate){ this.i=i; this.width=width; this.x=x; this.y=y; this.mX=mX; this.mY=mY; this.tX=tX; this.tY=tY; this.rotate=rotate; this.draw=function(){ for(var j=0;j<this.i;j++){ cxt.save(); cxt.lineWidth=this.width; cxt.strokeStyle="#000"; cxt.translate(this.x,this.y); cxt.rotate(j*this.rotate*Math.PI/180); cxt.moveTo(this.mX,this.mY); cxt.lineTo(this.tX,this.tY); cxt.stroke(); cxt.closePath(); cxt.restore(); } } } //小时刻度 function ShiKeDu(){ KeDu.call(this,12,7,250,250,0,-190,0,-170,30); } //分钟刻度 function MiaoKedu(){ KeDu.call(this,60,4,250,250,0,-190,0,-180,6); } //画指针 function Pointer(lineWidth,x,y,mX,mY,tX,tY,rotate,rotateData){ this.lineWidth=lineWidth; this.x=x; this.y=y; this.mX=mX; this.mY=mY; this.tX=tX; this.tY=tY; this.rotate=rotate; this.rotateData=rotateData; this.draw=function(){ cxt.save(); cxt.lineWith=this.lineWidth; cxt.strokeStyle="#000"; cxt.translate(this.x,this.y); cxt.rotate(this.rotateData*this.rotate*Math.PI/180); cxt.beginPath(); cxt.moveTo(mX,mY); cxt.lineTo(tX,tY); cxt.closePath(); cxt.stroke(); cxt.restore(); } } function HourP(){ Pointer.call(this,7,250,250,0,-140,0,10,30,hour); } function MinP(){ Pointer.call(this,6,250,250,0,-160,0,10,6,min); } function SecsP(){ Pointer.call(this,3,250,250,0,-170,0,20,6,sec); } //创建时间刻度对象 var shiKeDu=new ShiKeDu(); //创建分钟刻度对象 var miaoKeDu=new MiaoKedu(); var hour=0; var min=0; var sec=0; function drawClock(){ var now=new Date(); min=now.getMinutes(); hour=now.getHours(); hour=hour+min/60; hour=hour>12?hour-12:hour; sec=now.getSeconds(); //清楚画布 cxt.clearRect(0,0,500,500); //创建时分秒指针对象 var hourP=new HourP(); var minP=new MinP(); var secsP=new SecsP(); //画表盘 drawPan(); //小时刻度 shiKeDu.draw(); //分钟刻度 miaoKeDu.draw(); //小时指针 hourP.draw(); //分钟指针 minP.draw(); //秒指针 secsP.draw(); } setInterval(drawClock,1000); </script> </body> </html>
效果图：
看现在的时间。。。困困。。。闪人！