井井客

搜索

canvas漂亮时钟动画

canvas漂亮时钟动画,canvas时钟动画,html5时钟动画

canvas漂亮时钟动画

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas漂亮时钟动画</title>
<style type="text/css">
	html { background: #f2f2f2;}
	.clocks {
	   height: 500px;
	   width: 500px;
	   margin: 25px auto;
	   position: relative;
	}
</style>
</head>
<body>
<div class="clocks">
	<canvas id="canvas" width="500" height="500"></canvas>
</div>
<script type="text/javascript">
	// 内部变量
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var clockRadius = 250;
	// 清屏函数
	function clear() { // 清屏函数
		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	}
	
	function drawScene() { // 主绘制函数
		clear(); // 清屏
		// 获得当前时间
		var date = new Date();
		var hours = date.getHours();
		var minutes = date.getMinutes();
		var seconds = date.getSeconds();
		hours = hours > 12 ? hours - 12 : hours;
		var hour = hours + minutes / 60;
		var minute = minutes + seconds / 60;
		
		// 保存当前绘图上下文
		ctx.save();
		// 绘制时钟(作为背景)
		ctx.translate(canvas.width / 2, canvas.height / 2);
		ctx.beginPath();
		// 绘制数字
		ctx.font = '36px Arial';
		ctx.fillStyle = '#000';
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		
		for (var n = 1; n <= 12; n++) {
			var theta = (n - 3) * (Math.PI * 2) / 12;
			var x = clockRadius * 0.7 * Math.cos(theta);
			var y = clockRadius * 0.7 * Math.sin(theta);
			ctx.fillText(n, x, y);
		}
		
		// 绘制时针
		ctx.save();
		var theta = (hour - 3) * 2 * Math.PI / 12;
		ctx.rotate(theta);
		ctx.beginPath();
		ctx.moveTo(-15, -5);
		ctx.lineTo(-15, 5);
		ctx.lineTo(clockRadius * 0.5, 1);
		ctx.lineTo(clockRadius * 0.5, -1);
		ctx.fill();
		ctx.restore();
		
		// 绘制分针
		ctx.save();
		var theta = (minute - 15) * 2 * Math.PI / 60;
		ctx.rotate(theta);
		ctx.beginPath();
		ctx.moveTo(-15, -4);
		ctx.lineTo(-15, 4);
		ctx.lineTo(clockRadius * 0.8, 1);
		ctx.lineTo(clockRadius * 0.8, -1);
		ctx.fill();
		ctx.restore();
		
		// 绘制秒针
		ctx.save();
		var theta = (seconds - 15) * 2 * Math.PI / 60;
		ctx.rotate(theta);
		ctx.beginPath();
		ctx.moveTo(-15, -3);
		ctx.lineTo(-15, 3);
		ctx.lineTo(clockRadius * 0.9, 1);
		ctx.lineTo(clockRadius * 0.9, -1);
		ctx.fillStyle = '#0f0';
		ctx.fill();
		ctx.restore();
		
		//绘制小时格子
		ctx.save();  
		for (var i=0;i<12;i++){  
			ctx.beginPath();  
			ctx.rotate(Math.PI/6);  
			ctx.moveTo(215,0);  
			ctx.lineTo(235,0);  
			ctx.stroke();  
		}  
		ctx.restore();  
		//绘制分钟格子
		ctx.save();  
		ctx.lineWidth = 5;  
		for (i=0;i<60;i++){  
			if (i%5!=0) {  
				ctx.beginPath();  
				ctx.moveTo(232,0);  
				ctx.lineTo(235,0);  
				ctx.stroke();  
			}  
			ctx.rotate(Math.PI/30);  
		}  
		ctx.restore();
		ctx.restore(); 
	}
	
	setInterval(drawScene, 1000); // 每隔1s循环刷新显示
</script>
</body>
</html>

有稍微调整一下~

文章TAG:canvas

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

上一篇:Canvas烟花灿烂效果
下一篇:HTML5 Canvas中国国旗

文章分类

相关阅读

随便看看