canvas实现时钟效果

最新推荐文章于 2022-06-06 20:33:39 发布

pvfhv

最新推荐文章于 2022-06-06 20:33:39 发布

阅读量1.9k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/pvfhv/article/details/8267673

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>时钟</title>
	</head>

	<body>
		<canvas id="clock" width="500" height="500" style="background-color:black;">你的浏览器不支持canvas</canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("clock");
			var cxt = canvas.getContext("2d");

			function drawClock() {
				var now = new Date();
				var sec = now.getSeconds();
				var min = now.getMinutes();
				var hour = now.getHours();
				hour > 12 ? hour - 12 : hour;
				hour += (min / 60);

				//先清空画布
				cxt.clearRect(0, 0, canvas.width, canvas.height);

				//美女图片作为表盘背景     
				var img = new Image();
				img.src = "http://i3.static.olcdn.com/cms/201303/14/MjMw1363244722894_500.jpg";
				img.onload = function() {
					cxt.drawImage(img, 0, 50, canvas.width, 400);

					_innerDraw();
				}

				function _innerDraw() {
					//画表盘大圆 圆心：x=250 y=250
					cxt.strokeStyle = "#00FFFF";
					cxt.lineWidth = 10;
					cxt.beginPath();
					cxt.arc(250, 250, 200, 0, 2 * Math.PI, false);
					cxt.stroke();
					cxt.closePath();

					//时刻度
					for (var i = 0; i < 12; i++) {
						cxt.save(); //保存当前状态
						cxt.lineWidth = 7;
						cxt.strokeStyle = "#FFFF00";

						//设置原点
						cxt.translate(250, 250);
						//设置旋转角度
						cxt.rotate(30 * i * Math.PI / 180); //弧度   角度*Math.PI/180
						cxt.beginPath();
						cxt.moveTo(0, -175);
						cxt.lineTo(0, -195);
						cxt.stroke();
						cxt.closePath();
						cxt.restore(); //把原来状态恢复回来
					}

					//分刻度
					for (var i = 0; i < 60; i++) {
						cxt.save();
						cxt.lineWidth = 5;
						cxt.strokeStyle = "#FFFF00";
						cxt.translate(250, 250);
						cxt.rotate(i * 6 * Math.PI / 180);
						cxt.beginPath();
						cxt.moveTo(0, -185);
						cxt.lineTo(0, -195);
						cxt.stroke();
						cxt.closePath();
						cxt.restore();
					}



					//以下的时针、分针、秒针均要转动，所以在这里要设置其异次元空间的位置
					//根据当前的小时数、分钟数、秒数分别设置各个针的角度即可
					//-----------------------------时针-----------------------------
					cxt.save();
					cxt.lineWidth = 7;
					cxt.strokeStyle = "#00FFFF";
					cxt.translate(250, 250);
					cxt.rotate(hour * 30 * Math.PI / 180); //每小时旋转30度
					cxt.beginPath();
					cxt.moveTo(0, -130);
					cxt.lineTo(0, 10);
					cxt.stroke();
					cxt.closePath();
					cxt.restore();

					//-----------------------------分针-----------------------------
					cxt.save();
					cxt.lineWidth = 5;
					cxt.strokeStyle = "#FFFF00";
					cxt.translate(250, 250);
					cxt.rotate(min * 6 * Math.PI / 180); //每分钟旋转6度
					cxt.beginPath();
					cxt.moveTo(0, -150);
					cxt.lineTo(0, 10);
					cxt.stroke();
					cxt.closePath();
					cxt.restore();

					//-----------------------------秒针-----------------------------
					cxt.save();
					cxt.lineWidth = 3;
					cxt.strokeStyle = "#FF0000";
					cxt.translate(250, 250);
					cxt.rotate(sec * 6 * Math.PI / 180); //每秒旋转6度
					cxt.beginPath();
					cxt.moveTo(0, -170);
					cxt.lineTo(0, 10);
					cxt.stroke();
					cxt.closePath();


					//美化表盘，画中间的小圆
					cxt.beginPath();
					cxt.arc(0, 0, 7, 0, 360 * Math.PI / 180);
					cxt.fillStyle = "#FFFF00";
					cxt.fill();
					cxt.strokeStyle = "#FF0000";
					cxt.stroke();
					cxt.closePath();

					//秒针上的小圆
					cxt.beginPath();
					cxt.arc(0, -140, 7, 0, 360 * Math.PI / 180);
					cxt.fillStyle = "#FFFF00";
					cxt.fill();
					cxt.stroke();
					cxt.closePath();
					cxt.restore();


					//显示时间
					cxt.font = "normal 18px microsoft yahei";
					cxt.lineWidth = 2;
					cxt.fillStyle = "#0000FF";
					hour = now.getHours();
					var str = (hour > 10 ? hour : ("0" + hour)) + ":" + (min > 10 ? min : ("0" + min));
					cxt.fillText(str, 225, 380);

					//中国制造
					cxt.font = "bold 12px simsun";
					cxt.lineWidth = 1;
					cxt.fillText("Made In China", 210, 400);
				}
			}

			drawClock();
			setInterval(drawClock, 1000);
		</script>
	</body>

</html>