井井客

搜索

canvas动画十字架时钟

canvas动画时钟,canvas十字架时钟

canvas动画十字架时钟

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas动画十字架时钟</title>
<style type="text/css">
	html{ background:black; }
</style>
</head>
<body>
<canvas width='900' height='700' id='ctx'></canvas>
<script type="text/javascript">
	function b(){
		c=document.getElementById('ctx');
		ctx=c.getContext('2d');
		a();
		setInterval(a,1000);
	}
	
	var c=null;
	var ctx=null;
	function a(){
		var grd=ctx.createRadialGradient(0,0,0,0,0,200);
		var now=new Date(); 
	
		ctx.clearRect(0,0,c.width,c.height);
		// background-image
		ctx.save()
		ctx.beginPath();
		ctx.arc(500,300,200,0,2*Math.PI,false);
		ctx.closePath();
		ctx.clip()
		ctx.restore();
		ctx.save();  
		ctx.translate(500,300);  
		//ctx.scale(1.5,1.5);  
		ctx.rotate(-Math.PI/2);  
		ctx.strokeStyle = "rgba(255,255,255,0.5)";  
		ctx.lineWidth = 8;  
		ctx.lineCap = "round";
		
		//渐变背景
		ctx.save()
		ctx.beginPath();
		ctx.arc(0,0,200,0,2*Math.PI,false);
		ctx.closePath();
		grd.addColorStop(1,"rgba(0,0,0,1)");
		grd.addColorStop(0,"rgba(255,255,255,0.3)");
		ctx.fillStyle=grd;
		ctx.fill();
		ctx.restore();
		//小时格格  
		ctx.save();  
		for (var i=0;i<12;i++){  
			ctx.beginPath();  
			ctx.rotate(Math.PI/6);  
			ctx.moveTo(100,0);  
			ctx.lineTo(120,0);  
			ctx.stroke();  
		}  
		ctx.restore();  
		//分钟格格 
		ctx.save();  
		ctx.lineWidth = 5;  
		for (i=0;i<60;i++){  
			if (i%5!=0) {  
			ctx.beginPath();  
			ctx.moveTo(117,0);  
			ctx.lineTo(120,0);  
			ctx.stroke();  
		}  
		ctx.rotate(Math.PI/30);  
		}  
		ctx.restore();  
		var sec = now.getSeconds();  
		var min = now.getMinutes();  
		var hr  = now.getHours();  
		hr = hr>=12 ? hr-12 : hr;  
		//时针  
		ctx.save();  
		ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )  
		ctx.lineWidth = 14;  
		ctx.beginPath();  
		ctx.moveTo(-20,0);  
		ctx.lineTo(80,0);  
		ctx.stroke();  
		ctx.restore();  
		//分针
		ctx.save();  
		ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )  
		ctx.lineWidth = 10;  
		ctx.beginPath();  
		ctx.moveTo(-28,0);  
		ctx.lineTo(112,0);  
		ctx.stroke();  
		ctx.restore();  
		//秒针样式1--[烟斗]
		//ctx.save();
		//ctx.rotate(sec*Math.PI/30);
		//ctx.strokeStyle='red';
		//ctx.shadowColor='red';
		//ctx.shadowBlur=5;
		//ctx.shadowOffsetX=0;
		//ctx.shadowOffsetY=0;
		//ctx.lineWidth=6;
		//ctx.beginPath();
		//ctx.moveTo(0,0);
		//ctx.bezierCurveTo(30,-30,80,50,100,0);
		//ctx.stroke();
		//ctx.closePath();
		//ctx.beginPath();
		//ctx.arc(80,0,8,0,2*Math.PI,false)
		//ctx.fillStyle='red';
		//ctx.fill();
		//ctx.restore();
		//秒针样式2-[十字架]
		ctx.save();
		ctx.rotate(sec*Math.PI/30);
		ctx.strokeStyle='red';
		ctx.shadowColor='red';
		ctx.shadowBlur=5;
		ctx.shadowOffsetX=0;
		ctx.shadowOffsetY=0;
		ctx.lineWidth=6;
		ctx.beginPath();
		ctx.moveTo(-20,0);
		ctx.lineTo(100,0)
		ctx.stroke();
		ctx.closePath();
		ctx.moveTo(20,30);
		ctx.lineTo(20,-30);
		ctx.stroke();
		ctx.closePath();
		ctx.beginPath();
		ctx.arc(0,0,3,0,2*Math.PI,false)
		ctx.fillStyle='black';
		ctx.fill();
		ctx.restore(); 
		//白圈
		ctx.save();
		ctx.beginPath();
		ctx.lineWidth=20
		ctx.arc(0,0,200,0,2*Math.PI,false)
		ctx.closePath();
		ctx.strokeStyle='rgba(0,0,0,1)';
		ctx.stroke();
		ctx.restore();
		ctx.restore();  
	}
	
	window.onload=function(){
		b();
	}
</script>
</body>
</html>

秒钟的样式有两种,还有一种注释了

文章TAG:canvas

作者:井井客整理来源:互联网
本文标题:canvas动画十字架时钟
本文链接:http://www.jingjingke.com/c/22212.html

上一篇:canvas彩色移动颗粒动画
下一篇:canvas3D动画旋转球

文章分类

相关阅读

随便看看