html5 时钟
var time=new Date();//Acquisition time now 获取当前时间 var h=time.getHours(); var m=time.getMinutes(); var s=time.getSeconds(); //console.log((Math.PI*2)/12); h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12);//时针初始位置 hour pointer default location var x=200,y=200,sa=0; var colors = ['#ffffff','#e37f7f','#e37fd6','#b57fe3','#7f90e3','#7fcfe3'];//颜色全局变量 colors global variable function cl(){ var con=document.getElementById('clock');//获取canvas id var context=con.getContext('2d');//选定2d模式 2d model context.clearRect(0,0,con.width,con.height);//清除上一次的痕迹 clear last trace s++;// context.fillStyle=colors[0]; //填充颜色 fill the colors context.fillRect(0,0,con.width,con.height); context.beginPath(); context.arc(x,y,10,0,Math.PI*2,true);//圆心 draw a circle context.fill(); context.closePath(); context.save(); for(var i=0;i<12;i++){ //定义弧度 definition radian var radian=(Math.PI*2)/12 ; //console.log(radian) //结束 over context.beginPath(); context.font="12px Avral"; if(i==0 || i==3 || i==6 || i==9){ //definition 3,6,9,0(12)o'clock colors and radius; 定义3,6,9,12针头颜色 context.fillStyle=colors[1]; radius=4 }else{ context.fillStyle=colors[2]; radius=3; } //console.log(y-100) context.arc(x,y-100,radius,0,Math.PI*2,true); //draw 1-12 hour point 画时针 context.fill(); tf(context,x,y,radian);//绘画倾斜 draw transform } context.restore(); //秒° sa=(Math.PI*2)/60*s; console.log(sa) //时针转动 hour point moving context.save(); context.strokeStyle=colors[1]; context.lineWidth=3; tf(context,x,y,(Math.PI*2)/60*h); sj(context,x,y,y-40); context.restore(); //分针转动 minutes point moving context.save(); context.strokeStyle=colors[1]; context.lineWidth=2; tf(context,x,y,(Math.PI*2)/60*m); sj(context,x,y,y-68); context.restore(); //秒针转动 seconds point moving context.save(); context.strokeStyle=colors[1]; context.lineWidth=1; tf(context,x,y,sa); sj(context,x,y,y-80); context.restore(); //针转动规律 point move rule if(s%60==0){ sa=0,s=0,m++; if(m%12==0){ //每十二分 时针旋转一次 if(m!=0)h++; if(m%60==0)m=0; } if(h%60==0)h=0; } } function sj(context,x,y,z){ context.beginPath(); context.moveTo(x,y); context.lineTo(x,z); context.stroke(); context.fill(); } function tf(context,x,y,radian){ context.transform(Math.cos(radian), Math.sin(radian), -Math.sin(radian), Math.cos(radian), x*(1-Math.cos(radian)) + x*Math.sin(radian), y*(1-Math.cos(radian)) - y*Math.sin(radian))//Transform(x轴缩放,y轴倾斜,x轴倾斜,y轴缩放,x轴平移,y轴平移) } setInterval('cl()',1000)
HTML
<canvas id="clock" width="500" height="500"></canvas>
思路转自:http://www.helloweba.com/view-blog-187.html