使用Canvas创建的时钟小程序

最新推荐文章于 2024-04-20 19:07:05 发布

凤城老人

最新推荐文章于 2024-04-20 19:07:05 发布

阅读量584

点赞数

文章标签： canvas html5技术

本文链接：https://blog.csdn.net/pollybird/article/details/11666867

版权

晚上闲来无事，就一个人坐在电脑面前，用html的canvas标签写了一段很简单的时钟小程序，最后看起来觉得有点空洞，非常无耻的在时钟上面放了人家OMEGA的LOGO 吐舌头。

好了，废话不多说，我来show一下效果图，如果想要看动态的效果。直接打开http://www.beeslead.com/html5/clock.html

html5时钟效果图

下面就是把代码show出来了，希望大家不要见笑。不足之处欢迎指正。

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>基于HTML5的时钟示例</title>
		<style>
			div{
				margin:0 auto;
				width:500px;
				padding:0;
			}
		</style>
	</head>
	<body>
		<div>
			<canvas id="clock" width="500" height="500">
				该时钟使用了html5技术，如果您不能看到时钟，说明您的浏览器版本过低。<br />
				请将浏览器升级至IE9.0以上版本，或使用Firefox、Chrome、Opera、Safari等浏览器！<br />
				猎豹浏览器、遨游浏览器、搜狗浏览器、百度浏览器、QQ浏览器等双核浏览器请切换至极速模式浏览！
			</canvas>
		</div>
		<script>
			var clock = document.getElementById("clock");
			var cxt = clock.getContext("2d");
			function drawClock(){
				//获取当前时间开始
				var now = new Date();
				var sec = now.getSeconds();
				var min = now.getMinutes();
				var hour = now.getHours();
				hour = hour > 12 ? hour-12 : hour;  //将24小时进制转换为12小时
				//获取当前时间结束
				
				cxt.clearRect(0,0,500,500);  //清除画布
				
				//创建表盘开始
				cxt.beginPath();
				cxt.lineWidth = 10;  //设置线条宽度为10像素
				cxt.strokeStyle = "gray";  //设置线条颜色为灰色
				fillColorRadial = cxt.createRadialGradient(130,280,0,500,300,200);//创建一个新的圆锥渐变
				fillColorRadial.addColorStop(0, "rgb(255,238,180)");    //渐变阶段1
				fillColorRadial.addColorStop(0.2, "rgb(255,238,185)");  //渐变阶段2
				fillColorRadial.addColorStop(0.4, "rgb(253,210,123)");  //渐变阶段3
				fillColorRadial.addColorStop(0.7, "rgb(238,188,85)");   //渐变阶段4
				cxt.fillStyle = fillColorRadial;  //设置圆形以渐变色填充
				cxt.arc(250,250,200,0,360,false);  //创建一个以250,250为圆心的圆
				cxt.stroke();
				cxt.fill();
				cxt.closePath();
				//创建表盘结束
				
				//创建时钟的Logo开始
				cxt.beginPath();
				cxt.font = "40px Times New Roman";  //设置字体大小，字体
				cxt.fillStyle = "gray";  //设置文字颜色
				cxt.fillText("Ω",235,130);  //设置文字内容和文字位置
				cxt.closePath();
				
				cxt.beginPath();
				cxt.font = "12px Tahoma";  //设置文字大小，字体
				cxt.fillText("OMEGA",230,144);  //设置文字内容和文字位置
				cxt.closePath();
				//创建时钟的Logo结束
				
				//创建时针刻度开始
				for(var i=0; i<12; i++) //时针刻度为12个，从0度开始循环，每次循环增加30度
				{
					cxt.save();
					cxt.lineWidth=7;  //设置时针刻度的粗细
					cxt.strokeStyle = "#000000";  //设置时针刻度的颜色
					cxt.translate(250,250);  //将坐标原点设置到250,250
					cxt.rotate(i*30*Math.PI/180);  //设置角度，单位为弧度。 π=180°
					cxt.beginPath();
					cxt.moveTo(0,-170);  //设置时针刻度的初始坐标为0,-170
					cxt.lineTo(0,-190);  //设置时针刻度的结束坐标为0，-190
					//以上两行生成的时针刻度长度为20px
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				//创建时针刻度结束
				
				//创建分针刻度开始
				for(var i=0; i<60; i++)  //分针刻度为60个，从0度开始循环，每次循环增加6度
				{
					cxt.save();
					cxt.lineWidth = 4;  //设置分针刻度的粗细
					cxt.strokeStyle = "#000000";  //设置分针刻度的颜色
					cxt.translate(250,250);  //将坐标原点设置到250,250
					cxt.rotate(i*6*Math.PI/180);  //设置角度，单位为弧度。 π=180°
					cxt.beginPath();
					cxt.moveTo(0,-180);  //设置时针刻度的初始坐标为0,-180
					cxt.lineTo(0,-190);  //设置时针刻度的结束坐标为0,-190
					//以上两行生成的分针刻度长度为10px
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				//创建分针刻度结束
				
				//创建时针开始
				cxt.save();
				cxt.translate(250,250);
				cxt.beginPath();
				cxt.lineWidth = 7;  //设置时针的粗细
				cxt.strokeStyle = "#000000";  //设置时针的颜色
				cxt.rotate((hour+min/60+sec/3600)*30*Math.PI/180);  //小时+分钟/60+秒/3600 得到小时的浮点型数值
				cxt.closePath();
				cxt.moveTo(0,-140);  //初始化创建时针的起始坐标
				cxt.lineTo(0,10);    //时针的结束坐标（为了美观，时针超出圆心10px）
				cxt.stroke();
				cxt.restore();
				//创建时针结束
				
				//创建分针开始
				cxt.save();
				cxt.translate(250,250);
				cxt.beginPath();
				//设置分针风格
				cxt.lineWidth = 5;  //设置分针的粗细，比时针略细
				cxt.strokeStyle = "#000000";  //设置分针的颜色
				cxt.rotate((min+sec/60)*6*Math.PI/180);  //分钟+秒/60 得到分钟的浮点型数值
				cxt.closePath();
				cxt.moveTo(0,-160);  //初始化创建分针的起始坐标
				cxt.lineTo(0,15);    //分针的结束坐标（为了美观，时针超出圆心15px）
				cxt.stroke();
				cxt.restore();
				//创建分针结束
				
				//创建秒针开始
				cxt.save();
				cxt.translate(250,250);
				cxt.beginPath();
				cxt.lineWidth = 3;  //设置秒针的粗细，比分针略细
				cxt.strokeStyle = "#ff0000";   //设置秒针的颜色
				cxt.rotate(sec*6*Math.PI/180);
				cxt.closePath();
				cxt.moveTo(0,-170); //初始化创建秒针的起始坐标
				cxt.lineTo(0,20);   //秒针的结束坐标（为了美观，时针超出圆心20px）
				cxt.stroke();
				//创建秒针结束
				
				//时钟美化开始
				//画出时针、分针、秒针的交叉点
				cxt.beginPath();
				cxt.arc(0,0,5,0,360,false);
				cxt.closePath();
				cxt.fillStyle = "gray";
				cxt.strokeStyle = "red";
				cxt.fill();
				cxt.stroke();
				//设置秒针前端的小圆点
				cxt.beginPath();
				cxt.arc(0,-150,5,0,360,false);
				cxt.closePath();
				cxt.fillStyle = "gray";
				cxt.strokeStyle = "red";
				cxt.fill();
				cxt.stroke();
				cxt.restore();
				//时钟美化结束
			}
			
			drawClock(); //初始化时钟
			setInterval(drawClock,1000); //每一秒(1000毫秒)执行一次，让时钟动起来
			</script>
	</body>
</html>