Html5时钟特效代码

QQ截图20160910152714.jpg

Html5时钟特效代码

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title>时钟</title>    
		<style type="text/css">    
			canvas{display: block;margin: 0 auto;}    
		</style>    
	</head>    
	<body>    
		<canvas id="myCanvas" width="800" height="800">抱歉,您的浏览器不支持canvas画布</canvas>    
	</body>    
	<script type="text/javascript">    
		var myCanvas=document.getElementById("myCanvas");//获取画布    
		var cxt=myCanvas.getContext("2d");//给画布创建2d显示环境    
		show();    
		//第一根线    
		var aa=350;    
		var za=2;    
		var ab=450;    
		var zb=2;    
		var ac=380;    
		var zc=2;    
		//第二根线    
		var ca=360;    
		var ya=2;    
		var cb=460;    
		var yb=2;    
		var cc=390;    
		var yc=2;    
		//第三根线    
		var da=370;    
		var xa=2;    
		var db=470;    
		var xb=2;    
		var dc=400;    
		var xc=2;    
		//第四根线    
		var ea=380;    
		var ta=2;    
		var eb=480;    
		var tb=2;    
		var ec=410;    
		var tc=2;    
		//第五根线    
		var fa=390;    
		var sa=2;    
		var fb=490;    
		var sb=5;    
		var fc=416;    
		var sc=2;    
		setInterval(show,100);//定时器每秒执行一次目的是让秒针同步    
		function show(){    
			var now=new Date();//获取当地时间    
		var hour=now.getHours();//获取当前时间的小时数    
		var min=now.getMinutes();//获取当前时间的分钟数    
		var sec=now.getSeconds();//获取当地时间的秒数    
		hour+=parseFloat(min/60);//    
		hour=hour>12?hour-12:hour;//将24小时转化为12小时制    
		cxt.clearRect(0,0,800,800);//清除画布    
		//================  绘制表盘   ===================    
		cxt.strokeStyle="red";//设定绘制的颜色    
		cxt.fillStyle="#650665";//设定填充的颜色    
		cxt.beginPath();    
		cxt.lineWidth=20;//设定绘制的线宽    
		cxt.shadowColor="#f546cd";//设定阴影的颜色    
		cxt.shadowBlur=20;//设定阴影的模糊度    
		cxt.arc(400,400,200,0,2*Math.PI);//设置圆心点,元的半径为200,起始点为0度,结束点为360度    
		cxt.stroke();//绘制上面的圆    
		cxt.beginPath();    
		cxt.strokeStyle="yellow";    
		cxt.lineWidth=5;    
		cxt.arc(400,400,200,0,2*Math.PI);    
		cxt.stroke();    
		//=====================  刻度     =========================    
		for(var i=0;i<=60;i++){    
		   	if(i%5==0){    
		   		cxt.save();//储存之前的绘画环境    
		   	cxt.translate(400,400)//将中心点移动至画布的中心点    
		   	cxt.rotate(i*6*Math.PI/180);//旋转绘画  角度i*60 度    
		   	cxt.beginPath();//重置绘画环境    
		   	cxt.strokeStyle="red";//设定绘画颜色    
		   	cxt.lineWidth=8;//设置绘画线宽    
		   	cxt.moveTo(0,-192)//设定线的起始点    
		   	cxt.lineTo(0,-170)//设定线的结束    
		   	cxt.closePath();//回到起点    
		    	cxt.stroke();//绘制    
		   	cxt.restore();//提取指定点储存的绘画环境    
		   	}else{    
		   		cxt.save();//储存之前的绘画环境    
		   	cxt.translate(400,400)//将中心点移动至画布的中心点    
		   	cxt.rotate(i*6*Math.PI/180);//旋转绘画  角度i*60 度    
		   	cxt.beginPath();//重置绘画环境    
		   	cxt.strokeStyle="darkorange";//设定绘画颜色    
		   	cxt.lineWidth=5;//设置绘画线宽    
		   	cxt.moveTo(0,-192)//设定线的起始点    
		   	cxt.lineTo(0,-180)//设定线的结束    
		   	cxt.closePath();//    
		cxt.stroke();//绘制    
		   	cxt.restore();//提取指定点储存的绘画环境    
		   	}    
		}    
		for(var i=1;i<13;i++){//循环写入数字    
		   	cxt.save();//储存之前的绘画环境    
		   	cxt.translate(400,400);//吧0.0点移到表盘中心    
		   	cxt.beginPath();//创建新的绘画环境    
		   	cxt.font="24px 微软雅黑";    
		   	switch(i){//盘点语句    
		   		case 1://当i为1时    
		   		cxt.fillText(i,66,-116);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 2://当i为1时    
		   		cxt.fillText(i,116,-62);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 3://当i为1时    
		   		cxt.fillText(i,140,10);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 4://当i为1时    
		   		cxt.fillText(i,110,82);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 5://当i为1时    
		   		cxt.fillText(i,64,130);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 6://当i为1时    
		   		cxt.fillText(i,-6,150);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 7://当i为1时    
		   		cxt.fillText(i,-78,130);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 8://当i为1时    
		   		cxt.fillText(i,-130,82);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 9://当i为1时    
		   		cxt.fillText(i,-150,10);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 10://当i为1时    
		   		cxt.fillText(i,-130,-62);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 11://当i为1时    
		   		cxt.fillText(i,-80,-114);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   		case 12://当i为1时    
		   		cxt.fillText(i,-12,-134);//填充一个文本,内容为i当前的值  后面的是位置    
		   		break;    
		   	}    
		   	cxt.closePath();    
		   	cxt.fill();    
		   	cxt.restore();//旋转    
		}    
		//=============  圆心的边距   ================    
		cxt.strokeStyle="aqua";//    
		cxt.beginPath();    
		cxt.lineWidth=3;    
		cxt.arc(400,400,9,0,2*Math.PI);    
		cxt.closePath();    
		cxt.stroke();    
		//==============  圆心的颜色  ===============    
		cxt.fillStyle="#d10606";    
		cxt.beginPath();    
		cxt.arc(400,400,8,0,2*Math.PI);    
		cxt.closePath();    
		cxt.fill();    
		//==========  秒针       =======================    
		cxt.beginPath();    
		cxt.save();    
		cxt.strokeStyle="aqua";    
		cxt.translate(400,400);    
		cxt.rotate((sec*6)*Math.PI/180);    
		cxt.fillStyle="aqua";    
		cxt.beginPath();    
		cxt.moveTo(0,0);    
		cxt.lineTo(0,-150);    
		cxt.fill();    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(-10,-80);    
		cxt.quadraticCurveTo(10,-105,-10,-130);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(-10,-80);    
		cxt.quadraticCurveTo(30,-105,-10,-130);    
		cxt.stroke();    
		cxt.fill();    
		cxt.restore();    
		//===============  分针     ================    
		cxt.beginPath();    
		cxt.save();    
		cxt.strokeStyle="red";    
		cxt.translate(400,400);    
		cxt.rotate((min*6)*Math.PI/180);    
		cxt.fillStyle="red";    
		cxt.beginPath();    
		cxt.moveTo(0,0);    
		cxt.lineTo(0,-130);    
		cxt.fill();    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(-10,-60);    
		cxt.quadraticCurveTo(10,-85,-10,-110);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(-10,-60);    
		cxt.quadraticCurveTo(30,-85,-10,-110);    
		cxt.stroke();    
		cxt.fill();    
		cxt.restore();    
		//============  时针   ==================    
		cxt.beginPath();    
		cxt.save();    
		cxt.strokeStyle="darkred";    
		cxt.translate(400,400);    
		cxt.rotate((hour*30)*Math.PI/180);    
		cxt.fillStyle="darkred";    
		cxt.beginPath();    
		cxt.moveTo(0,0);    
		cxt.lineTo(0,-100);    
		cxt.fill();    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(-10,-30);    
		cxt.quadraticCurveTo(10,-55,-10,-80);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(-10,-30);    
		cxt.quadraticCurveTo(30,-55,-10,-80);    
		cxt.stroke();    
		cxt.fill();    
		cxt.restore();    
		//=============  边框    ===================    
		cxt.save();    
		cxt.strokeStyle="red";    
		cxt.beginPath();    
		cxt.moveTo(400,191);    
		cxt.bezierCurveTo(500,170,300,130,400,100);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(380,608);    
		cxt.lineTo(380,624);    
		cxt.lineTo(420,624);    
		cxt.lineTo(420,608);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(384,624);    
		cxt.bezierCurveTo(aa,645,ab,685,ac,700);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(394,624);    
		cxt.bezierCurveTo(ca,645,cb,685,cc,700);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(404,624);    
		cxt.bezierCurveTo(da,645,db,685,dc,700);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(414,624);    
		cxt.bezierCurveTo(ea,645,eb,685,ec,700);    
		cxt.stroke();    
		cxt.beginPath();    
		cxt.moveTo(420,624);    
		cxt.bezierCurveTo(fa,645,fb,685,fc,700);    
		cxt.stroke();    
		//第一根线============    
		aa+=za;    
		if(aa>=440){    
		   	za=-2;    
		}else if(aa<=340){    
		   	za=2;    
		}    
		ab+=zb;    
		if(ab>=440){    
		   	zb=-2;    
		}else if(ab<=340){    
		   	zb=2;    
		}    
		ac+=zc;    
		if(ac>=440){    
		   	zc=-2;    
		}else if(ac<=340){    
		   	zc=2;    
		}    
		//第二根线====    
		ca+=ya;    
		if(ca>=450){    
		   	ya=-2;    
		}else if(ca<=350){    
		   	ya=2;    
		}    
		cb+=yb;    
		if(cb>=450){    
		   	yb=-2;    
		}else if(cb<=350){    
		   	yb=2;    
		}    
		cc+=yc;    
		if(cc>=450){    
		   	yc=-2;    
		}else if(cc<=350){    
		   	yc=2;    
		}    
		//第三根线======    
		da+=xa;    
		if(da>=460){    
		   	xa=-2;    
		}else if(da<=360){    
		   	xa=2;    
		}    
		db+=xb;    
		if(db>=460){    
		   	xb=-2;    
		}else if(db<=360){    
		   	xb=2;    
		}    
		dc+=xc;    
		if(dc>=460){    
		   	xc=-2;    
		}else if(dc<=360){    
		   	xc=2;    
		}    
		//第四根线======    
		ea+=ta;    
		if(ea>=470){    
		   	ta=-2;    
		}else if(ea<=370){    
		   	ta=2;    
		}    
		eb+=tb;    
		if(eb>=470){    
		   	tb=-2;    
		}else if(eb<=370){    
		   	tb=2;    
		}    
		ec+=tc;    
		if(ec>=470){    
		   	tc=-2;    
		}else if(ec<=370){    
		   	tc=2;    
		}    
		//第五根线======    
		fa+=sa;    
		if(fa>=480){    
		   	sa=-2;    
		}else if(fa<=380){    
		   	sa=2;    
		}    
		fb+=sb;    
		if(fb>=480){    
		   	sb=-2;    
		}else if(fb<=380){    
		   	sb=2;    
		}    
		fc+=sc;    
		if(fc>=476){    
		   	sc=-2;    
		}else if(fc<=376){    
		   	sc=2;    
		}    
		}    
	</script>    
</html>


未经允许请勿转载:程序喵 » Html5时钟特效代码

点  赞 (1) 打  赏
分享到: