H5+JS制作钟表 - 爱码网

源代码：
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<center>
			<canvas width="600" height="600" id="time-paint"></canvas>
		</center>
		<script>
			var context = document.getElementById("time-paint").getContext("2d");
			context.translate(300, 300); //原点设置
			setInterval("draw()",1000);//隔1秒执行函数一次
			function draw() {
				//每次绘制图形之前 先清空画布所有的区域
				context.clearRect(-300, -300, 600, 600);
				var time = new Date();
				var hour = time.getHours();
				var minutes = time.getMinutes();
				var seconds = time.getSeconds();
				var dateNum = time.getFullYear() + "年" +
					(time.getMonth() > 9 ? time.getMonth() : "0" + time.getMonth()) + "月" +
					(time.getDay() > 9 ? time.getDay() : "0" + time.getDay()) + "日";
				var timeNum = (hour > 9 ? hour : "0" + hour) +
					":" + (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds);
				//钟表边
				context.beginPath();
				context.arc(0, 0, 200, Math.PI * 0, Math.PI * 2);
				context.strokeStyle = "#660000"
				context.lineWidth = "10";
				context.fillStyle = "rgba(100,150,185,0.2)";
				context.stroke();
				context.fill();
				context.closePath();
				//中心原点
				context.beginPath();
				context.arc(0, 0, 13, Math.PI * 0, Math.PI * 2);
				context.fillStyle = "white";
				context.fill();
				context.closePath();
				
				for(var i = 0; i < 60; i++) {
					context.beginPath();
					context.moveTo(0, -186);
					context.lineTo(0, -192);
					context.strokeStyle = "#BBBB00";
					context.lineWidth = "3";
					context.stroke();
					context.closePath();
					context.rotate(1 / 30 * Math.PI); //旋转坐标系
				}
				for(var i = 0; i < 12; i++) {
					context.beginPath();
					context.moveTo(0, -180);
					context.lineTo(0, -192);
					context.strokeStyle = "#AA7700";
					context.lineWidth = "5";
					context.stroke();
					context.closePath();
					context.rotate(1 / 6 * Math.PI); //旋转坐标系
				}
              //数字显示
				context.beginPath();
				context.font = "22px 'franklin gothic medium'";
				context.strokeStyle = "black";
				context.lineWidth = "1";
				context.strokeText(dateNum, -85, 50);
				context.strokeText(timeNum, -45, 80);
				context.closePath();

				//时针
				var hours = hour >= 12 ? hour - 12 : hour;
				context.beginPath();
				context.rotate((hours + minutes / 60) * 30 / 180 * Math.PI);
				context.moveTo(0, 30);
				context.lineTo(0, -120);
				context.strokeStyle = "#990000";
				context.lineWidth = "8";
				context.stroke();
				context.closePath();
				context.rotate(-(hours+minutes/60) * 30 / 180 * Math.PI);
				//分针
				context.rotate(minutes * 6 / 180 * Math.PI);
				context.beginPath();
				context.moveTo(0, 25);
				context.lineTo(0, -150);
				context.lineWidth = "5";
				context.strokeStyle = "orange";
				context.stroke();
				context.closePath();
				context.rotate(-minutes * 6 / 180 * Math.PI);
				//绘制秒针
				context.rotate(seconds * 6 / 180 * Math.PI);
				context.beginPath();
				context.moveTo(0, 30);
				context.lineTo(0, -175);
				context.lineWidth = '3';
				context.strokeStyle = "red";
				context.stroke();
				context.closePath();
				context.beginPath();
				context.arc(0, -160, 5, Math.PI * 0, Math.PI * 2);
				context.fillStyle = "red";
				context.fill();
				context.closePath();
				context.rotate(-seconds * 6 / 180 * Math.PI);
				//中心原点
				context.beginPath();
				context.arc(0, 0, 9, Math.PI * 0, Math.PI * 2);
				context.fillStyle = "red";
				context.fill();
				context.closePath();
			}
		</script>
	</body>
</html>
效果图
H5+JS制作钟表