CSS3电子钟(圆形指针电子表)

2024-09-05 12:18:53

字体：大中小

来源：转载

供稿：网友

又一个HTML5电子钟特效，圆形带指针的电子表特效，自动读取系统时间，适时显示时间。基于HTML5 Canvas和CSS3技术，那些张炫丽效果就不说了，我只想说CSS3配合HTML5，真绝了，以后可以不用Flash做动画了，呵呵。

<!doctype html><html><head><meta charset="utf-8"><title>CSS3电子钟</title><style type="text/css">html,body,canvas,div{ margin:0; padding:0;}.wrapper{ width:318px; height:318px; margin:100px auto; position:relative;}#loading{ width:318px; height:318px; position:absolute; left:0; top:0; background:url(360Image/loader.gif) no-repeat center center; z-index:10;}</style></head><body><div class="wrapper"><canvas id="canvas" width="318" height="318">您的浏览器不支持Canvas</canvas><div id="loading"></div></div><script type="text/javascript">var context=document.getElementById('canvas').getContext('2d'),	loader=document.getElementById('loading'),	aImg=['fancyclock.png','hour.png','minute.png','second.png'],	IMGPATH="../images/";var Clock=function(){	//加载图片计数器	this.imageCount=0;	//存储image变量	this.imgVar={};	//动画帧数	this.fps=60;	//帧数标识	this.fpsCount=0;	this.init.apply(this,arguments);}Clock.prototype={	init:function(context,confing){		this.context=context;		this.aImg=confing.imgAry;		this.IMGPATH=confing.imgPath;		if(confing.loading){			this.loading=confing.loading;		}		this.imagesLoad();	},	//图片加载	imagesLoad:function(){		var imgAry=this.aImg,			self=this;		for(var i=0,len=imgAry.length;i<len;i++){			var img=imgAry[i],				index=img.indexOf('.'),				name=img.substring(0,index);			this.imgVar[name]=new Image();			this.imgVar[name].src=this.IMGPATH+img;			this.imgVar[name].onload=function(){				self.imageCount++;				if(self.isImagesLoad()){					if(self.loading){						self.loading.style.display="none";					}					self.context.translate(self.context.canvas.width/2,self.context.canvas.height/2);					var animation=function(){						return self.draw();						}					animation();					setInterval(animation,1000);				}			}		}	},	nowTime:function(){		var now=new Date(),			hour=now.getHours(),			minute=now.getMinutes(),			second=now.getSeconds();					this.sAngle=second/60*360-180;		this.mAngle=minute/60*360-180;		this.hAngle=((hour+(minute/60))/12)*360-180;	},	//绘制方法	draw:function(){			var self=this;		this.nowTime();		this.context.clearRect(-this.context.canvas.width/2,-this.context.canvas.height/2,this.context.canvas.width,this.context.canvas.height)		self.context.drawImage(self.imgVar.fancyclock,-self.context.canvas.width/2,-self.context.canvas.height/2);		this.context.save();		this.context.rotate(this.hAngle*Math.PI/180);		this.context.drawImage(this.imgVar.hour,-8,-38);		this.context.restore();		this.context.save();		this.context.rotate(this.mAngle*Math.PI/180);		this.context.drawImage(this.imgVar.minute,-8,-30);		this.context.restore();		this.context.save();		this.context.rotate(this.sAngle*Math.PI/180);		this.context.drawImage(this.imgVar.second,-8,-30);		this.context.restore();	},	//判断图片是否全部加载	isImagesLoad:function(){		if(this.imageCount>=this.aImg.length){			return true		}else{			return false;			}	}}var clock=new Clock(context,{	imgAry:aImg,	imgPath:IMGPATH,	loading:loader});</script></body></html>

上一篇：HTML5 canvas颜色选择器

下一篇：纯CSS3实现Android开机画面android robot动画