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

 

转载于:https://www.cnblogs.com/dean5277/archive/2012/09/07/2675392.html