HTML5 时钟
利用HTML5提供的canvas，可以简单地实现一个走动的时钟，不用使用任何图片。
主要是理解里面的数学关系。。
在chrome浏览器运行良好，其他浏览器的暂未测试。
代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>HTML5实现时钟</title> 7 <script type="text/javascript"> 8 window.onload=function(){ 9 var ctx=document.getElementByIdx_x("mycanvas").getContext("2d"); 10 var mycanvas=document.getElementByIdx_x("mycanvas"); 11 var cwidth=200; 12 var cheight=200; 13 ctx.translate(cwidth/2+40,cheight/2-25); //将基点移动到中心 14 var len=cwidth/2; 15 16 //alert("hi"); 17 function drawWatch(){ 18 ctx.clearRect(-cwidth/2,-cheight/2,cwidth,cheight); 19 var tlen=len*0.65; //画数字 20 ctx.font="14px 'Arial"; 21 ctx.fillStyle="#000"; 22 ctx.textAlign="center"; 23 ctx.textBaseline="middle"; 24 for(var i=0;i<12;i++){ 25 var tag1=Math.PI*2*(3-i)/12; 26 var tx=tlen*Math.cos(tag1); 27 var ty=-tlen*Math.sin(tag1); 28 if(i==0) ctx.fillText(12,tx,ty); 29 else 30 ctx.fillText(i,tx,ty); 31 } 32 var d=new Date(); 33 var h=d.getHours(); 34 var m=d.getMinutes(); 35 var s=d.getSeconds(); 36 if(h>12) h=h-12; 37 //绘制时针 38 var angle1=Math.PI*2*(3-(h+m/60))/12; 39 var length1=len*0.3; 40 var width1=5; 41 var color1="#000"; 42 drawHand(angle1,length1,width1,color1); 43 //绘制分针 44 var angle2=Math.PI*2*(15-(m+s/60))/60; 45 var width2=3; 46 var length2=len*0.45; 47 var color2="#555555"; 48 drawHand(angle2,length2,width2,color2); 49 //绘制秒针 50 var angle3=Math.PI*2*(15-s)/60; 51 var length3=len*0.55; 52 var width3=1; 53 var color3="#aa0000"; 54 drawHand(angle3,length3,width3,color3); 55 } 56 function drawHand(angle,len,width,color){ 57 var x=len*Math.cos(angle); 58 var y=-len*Math.sin(angle); 59 ctx.strokeStyle=color; 60 ctx.lineWidth=width; 61 ctx.lineCap="round"; // 把针尖设置为圆形 62 ctx.beginPath(); 63 ctx.moveTo(0,0); 64 ctx.lineTo(x,y); 65 ctx.stroke(); 66 } 67 setInterval(drawWatch,1000); 68 } 69 </script> 70 </head> 71 <body> 72 <canvas id="mycanvas" style="width: 200px; height: 200px; border: 2px dotted #000;"> </canvas> 73 </body> 74 </html>
