您的位置：首页 > Web前端 > HTML5

HTML5---canvas 指针时钟-clock

2015-08-20 10:33 555 查看 
<!doctype html>
<html>
<head></head>
<body>
<canvas id="clock" width="500" height="500">
	您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
	var clock=document.getElementById('clock');
	var cxt=clock.getContext('2d');

	function drawClock(){	
		cxt.clearRect(0,0,500,500);	//清除画布区域
		var now =new Date();
		var sec=now.getSeconds();
		var min=now.getMinutes();
		var hour=now.getHours();			
		
		hour=hour+min/60;	//小时必须获取浮点类型(小时+分数转化成的小时)
		//问题 19:23:30
		//将24小时进制转换为12小时
		hour=hour>12?hour-12:hour;
		
		
		cxt.lineWidth=10;
		cxt.strokeStyle="#A61C3E";	//表盘(蓝色)
		cxt.beginPath();
		cxt.arc(250,250,200,0,Math.PI*360,false);
		cxt.closePath();
		cxt.stroke();

		//时刻度
		for(var i=0;i<12;i++){
			cxt.save();				
			cxt.lineWidth=7;	//设置时针的粗细				
			cxt.strokeStyle="#005693";	//设置时针的颜色				
			cxt.translate(250,250);				
			cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
			cxt.beginPath();
			cxt.moveTo(0,-170);
			cxt.lineTo(0,-190);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		}
			
		//分刻度
		for(var i=0;i<60;i++){
			cxt.save();				
			cxt.lineWidth=5;				
			cxt.strokeStyle="#04562E";				
			cxt.translate(250,250);			
			cxt.rotate(i*6*Math.PI/180);				
			cxt.beginPath();
			cxt.moveTo(0,-180);
			cxt.lineTo(0,-190);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		}
		
		//时针
			cxt.save();			
			cxt.lineWidth=7;				
			cxt.strokeStyle="#04562E";				
			cxt.translate(250,250);//设置异次元空间的0，0点，画布的圆心
			cxt.rotate(hour*30*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0,-120);		//针长
			cxt.lineTo(0,10);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		
		
		//分针
			cxt.save();
			cxt.lineWidth=5;
			cxt.strokeStyle="#000";
			cxt.translate(250,250);
			cxt.rotate(min*6*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0,-150);
			cxt.lineTo(0,15);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		
			
		//秒针			
			cxt.save();
			cxt.strokeStyle="#611123";
			cxt.lineWidth=3;
			cxt.translate(250,250);				
			cxt.rotate(sec*6*Math.PI/180);//设置旋转角度				
			cxt.beginPath();	//画图
			cxt.moveTo(0,-170);
			cxt.lineTo(0,20);
			cxt.closePath();
			cxt.stroke();				
			cxt.beginPath();	//画出时针、分针、秒针的交叉点、
			cxt.arc(0,0,5,0,360,false);
			cxt.closePath();				
			cxt.fillStyle="gray";	//设置填充样式
			cxt.fill();				
			cxt.stroke();
			
			//设置秒针前段的小圆点
			cxt.beginPath();
			cxt.arc(0,-150,5,0,360,false);
			cxt.closePath();
			cxt.fillStyle="#FFF";
			cxt.fill();				
			cxt.stroke();//设置笔触样式(秒针已设置)				
			cxt.restore();
		}
	
	
	drawClock();	//1000毫秒前要显示
	//使用setInterval(代码,毫秒时间)  让时钟动起来
	setInterval(drawClock,1000);
</script>
</body>
</html>


效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航