canvas钟表 - 掘金

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas Clock</title>
		<style>
			.clocks {
				height: 500px;
				margin: 25px auto;
				position: relative;
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div class="clocks">
			<canvas id="clock" width="500" height="500"></canvas>
		</div>
		<script>
			// 通过canvas元素创建一个canvas对象
			var oClock = document.getElementById('clock');
			// 为canvas对象创建一个2D绘图对象
			var ctx = oClock.getContext("2d");
			//获取画布的宽度
			var width = ctx.canvas.width;
			//获取画布的高度
			var height = ctx.canvas.height;
			//使用画布计算时钟的半径
			var r = width / 2;
			//自适应大小像素的比例设置
			var rem = width / 200;

			// 画圆
			function drawBackground() {
				ctx.save();
				// 将（0,0）位置（绘图对象）重新映射到画布的中心
				ctx.translate(r, r);
				/*
				// 起始一条路径，或重置当前路径。
				ctx.beginPath();
				//线的宽度
				ctx.lineWidth = 10 * rem;
				//钟表外环   以0，0为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆
				ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);
				ctx.stroke(); 
				*/

				var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
				//设置或返回文本内容的当前字体属性。
				ctx.font = 18 * rem + 'px Arial';
				//设置或返回文本内容的当前对齐方式。   center文本的中心被放置在指定的位置。
				ctx.textAlign = 'center';
				//设置或返回在绘制文本时使用的当前文本基线。 middle文本基线是 em 方框的正中。
				ctx.textBaseline = 'middle';

				//画出1-12的数字
				hourNumber.forEach(function(number, i) {
					var rad = 2 * Math.PI / 12 * i;//12个数字分得弧度弧度
					var x = Math.cos(rad) * (r - 30 * rem);
					var y = Math.sin(rad) * (r - 30 * rem);
					ctx.fillText(number, x, y);
				});

				//画出秒针走动的60个点
				for (var i = 0; i < 60; i++) {
					var rad = 2 * Math.PI / 60 * i; //60个数字分得弧度
					var x = Math.cos(rad) * (r - 18 * rem);
					var y = Math.sin(rad) * (r - 18 * rem);
					ctx.beginPath();
					// 如果是第五个点的话，背景为黑色
					if (i % 5 === 0) {
						ctx.fillStyle = '#000';
						//每个数字对应的点      以x，y为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆
						ctx.arc(x, y, 2 * rem, 0, 2, 2 * Math.PI, false);
					} else {
						ctx.fillStyle = '#ccc';
						ctx.arc(x, y, 2 * rem, 0, 2, 2 * Math.PI, false);
					}
					// 填充当前绘图路径
					ctx.fill();
				}
			}

			//绘制时针
			function drawHour(hour, minute) {
				ctx.save();
				ctx.beginPath();
				var rad = 2 * Math.PI / 12 * hour;//时针弧度
				var mrad = 2 * Math.PI / 12 / 60 * minute;//分针弧度
				// 旋转当前绘图
				ctx.rotate(rad + mrad);
				// 设置或返回当前的线条宽度。
				ctx.lineWidth = 6;
				// lineCap设置或返回线条的结束端点样式。 round 向线条的每个末端添加圆形线帽。
				ctx.lineCap = 'round';
				// 把路径移动到画布中的指定点，不创建线条。
				ctx.moveTo(0, 10 * rem);
				// 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
				ctx.lineTo(0, -r / 2);
				// 绘制已定义的路径。
				ctx.stroke();
				// 返回之前保存过的路径状态和属性。
				ctx.restore();
			}

			//绘制分针
			function drawMinute(minute) {
				ctx.save();
				ctx.beginPath();
				var rad = 2 * Math.PI / 60 * minute;
				ctx.rotate(rad);
				ctx.lineWidth = 3 * rem;
				// round 向线条的每个末端添加圆形线帽。
				ctx.lineCap = 'round';
				ctx.moveTo(0, 10);
				ctx.lineTo(0, -r + 30 * rem);
				ctx.stroke();
				ctx.restore();
			}

			//绘制秒针
			function drawSecond(second) {
				ctx.save();
				ctx.beginPath();
				ctx.fillStyle = '#0f0';
				var rad = 2 * Math.PI / 60 * second;
				ctx.rotate(rad);
				ctx.moveTo(-2, 20 * rem);
				ctx.lineTo(2, 20 * rem);
				ctx.lineTo(1, -r + 18 * rem);
				ctx.lineTo(-1, -r + 18 * rem);
				ctx.fill();
				ctx.restore();
			}

			//画时钟上的中心白色原点
			function drawDot() {
				ctx.beginPath();
				ctx.fillStyle = '#fff'; //填充的颜色
				//以0，0为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆
				ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false);
				ctx.fill();
			}

			function draw() {
				//清除之前的样式，重新绘制
				ctx.clearRect(0, 0, width, height);
				
				// 使用日期获取时分秒
				var now = new Date();
				var hour = now.getHours();
				var minutes = now.getMinutes();
				var seconds = now.getSeconds();

				drawBackground();
				
				drawHour(hour, minutes);
				drawMinute(minutes);
				drawSecond(seconds);
				
				drawDot();
				ctx.restore();
			}
			
			// setInterval() 函数会每秒执行一次函数
			setInterval(draw, 1000); //每秒执行一次
		</script>
	</body>
</html>