用canvas绘制了一个钟表，废话不多说了，直接上代码吧。效果图如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas钟表</title> <meta name="Keywords" content=""> <meta name="author" content="@my_programmer"> <style type="text/css"> body{margin:0;} </style> </head> <body onload="run()"> <canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字，说明你的浏览器弱爆了！</canvas> <script> window.onload=draw; function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); context.save(); ///////////////////////////////////保存 context.translate(200,200); var deg=2*Math.PI/12; //////////////////////////////////////////////////表盘 context.save(); context.beginPath(); for(var i=0;i<13;i++){ var x=Math.sin(i*deg); var y=-Math.cos(i*deg); context.lineTo(x*150,y*150); } var c=context.createRadialGradient(0,0,0,0,0,130); c.addColorStop(0,"#22f"); c.addColorStop(1,"#0ef") context.fillStyle=c; context.fill(); context.closePath(); context.restore(); //////////////////////////////////////////////////数字 context.save(); context.beginPath(); for(var i=1;i<13;i++){ var x1=Math.sin(i*deg); var y1=-Math.cos(i*deg); context.fillStyle="#fff"; context.font="bold 20px Calibri"; context.textAlign='center'; context.textBaseline='middle'; context.fillText(i,x1*120,y1*120); } context.closePath(); context.restore(); //////////////////////////////////////////////////大刻度 context.save(); context.beginPath(); for(var i=0;i<12;i++){ var x2=Math.sin(i*deg); var y2=-Math.cos(i*deg); context.moveTo(x2*148,y2*148); context.lineTo(x2*135,y2*135); } context.strokeStyle='#fff'; context.lineWidth=4; context.stroke(); context.closePath(); context.restore(); //////////////////////////////////////////////////小刻度 context.save(); var deg1=2*Math.PI/60; context.beginPath(); for(var i=0;i<60;i++){ var x2=Math.sin(i*deg1); var y2=-Math.cos(i*deg1); context.moveTo(x2*146,y2*146); context.lineTo(x2*140,y2*140); } context.strokeStyle='#fff'; context.lineWidth=2; context.stroke(); context.closePath(); context.restore(); ///////////////////////////////////////////////////文字 context.save(); context.strokeStyle="#fff"; context.font=' 34px sans-serif'; context.textAlign='center'; context.textBaseline='middle'; context.strokeText('canvas',0,65); context.restore(); /////////////////////////////////////////////////new Date var time=new Date(); var h=(time.getHours()%12)*2*Math.PI/12; var m=time.getMinutes()*2*Math.PI/60; var s=time.getSeconds()*2*Math.PI/60; ////////////////////////////////////////////////时针 context.save(); context.rotate( h + m/12 + s/720) ; context.beginPath(); context.moveTo(0,6); context.lineTo(0,-85); context.strokeStyle="#fff"; context.lineWidth=6; context.stroke(); context.closePath(); context.restore(); //////////////////////////////////////////////分针 context.save(); context.rotate( m+s/60 ) ; context.beginPath(); context.moveTo(0,8); context.lineTo(0,-105); context.strokeStyle="#fff"; context.lineWidth=4; context.stroke(); context.closePath(); context.restore(); /////////////////////////////////////////////秒针 context.save(); context.rotate( s ) ; context.beginPath(); context.moveTo(0,10); context.lineTo(0,-120); context.strokeStyle="#fff"; context.lineWidth=2; context.stroke(); context.closePath(); context.restore(); context.restore();/////////////////////////////栈出 setTimeout(draw, 1000);/////////////////////////////计时器 } </script> </body> </html>
本文转自挨踢前端博客园博客，原文链接http://www.cnblogs.com/duanhuajian/archive/2012/10/17/2728072.html如需转载请自行联系原作者
@挨踢前端
