html5 canvas实例-时钟

2015-08-25 网页编程网 网页编程网

<!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="blue";
			cxt.beginPath();
			cxt.arc(250,250,200,0,360,false);
			cxt.closePath();
			cxt.stroke();
			//刻度
				//时刻度
				for(var i=0;i<12;i++){
					cxt.save();
					//设置时针的粗细
					cxt.lineWidth=7;
					//设置时针的颜色
					cxt.strokeStyle="#000";
					//先设置0,0点
					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="#000";
					//设置或者重置画布的0，0点
					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="#000";
				//设置异次元空间的0，0点
				cxt.translate(250,250);
				//设置旋转角度
				cxt.rotate(hour*30*Math.PI/180);
				cxt.beginPath();
				cxt.moveTo(0,-140);
				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,-160);
				cxt.lineTo(0,15);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
			//秒针
				cxt.save();
				//设置秒针的风格
				//颜色红色
				cxt.strokeStyle="red";
				//粗细 3像素
				cxt.lineWidth=3;
				//重置0，0点
				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="gray";
				cxt.fill();
				//设置笔触样式(秒针已设置)
				cxt.stroke();
				
				cxt.restore();
			}
			//使用setInterval(代码,毫秒时间)  让时钟动起来
			drawClock();
			setInterval(drawClock,1000);
		</script>
	</body></html>

阅读原文

阅读 5105

123 显示电脑版