web前端：canvas画布引用，时钟表自动刷新实现，纯js原生组件

1.less

* {
    margin: 0;
    padding: 0;
    #wrap {
        width: 600px;
        height: 800px;
        background: tomato;
        border: 2px solid white;
        border-radius: 5%;
        //这里不可使用position，会影响画布的坐标定位
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 5% auto;
        font: 20px "微软雅黑";
        text-align: center;
        color: white;
        transition: 2s;
        &:hover {
            background: steelblue;
        }
        h1 {
            margin-top: 8%;
        }
        h2 {
            margin-left: 30%;
            margin-top: 100%;
        }
        #wrap-canvas {
            position: absolute;
            background: skyblue;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
* #wrap {
  width: 600px;
  height: 800px;
  background: tomato;
  border: 2px solid white;
  border-radius: 5%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 5% auto;
  font: 20px "微软雅黑";
  text-align: center;
  color: white;
  transition: 2s;
}
* #wrap:hover {
  background: steelblue;
}
* #wrap h1 {
  margin-top: 8%;
}
* #wrap h2 {
  margin-left: 30%;
  margin-top: 100%;
}
* #wrap #wrap-canvas {
  position: absolute;
  background: skyblue;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

3.js

$(function() {
	var canvasNode = document.querySelector("#wrap-canvas");
	if(canvasNode.getContext) {
		var canvasPen = canvasNode.getContext("2d");

		setInterval(function(){
			canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);
			clockMove();
		}, 1000);
		clockMove();
		function clockMove() {
			/**1.外层表圈**/
			canvasPen.save();
			canvasPen.strokeStyle = "cornsilk";
			canvasPen.lineWidth = 10;
			canvasPen.lineCap = "round";
			//更新源点
			canvasPen.translate(250, 250);
			//旋转顺时针
			canvasPen.rotate(-90 * Math.PI / 180);
			canvasPen.beginPath();

			/**2.外层表盘**/
			canvasPen.save();
			canvasPen.strokeStyle = "#FAEBCC";
			canvasPen.lineWidth = 15;
			canvasPen.beginPath();
			//画圆
			canvasPen.arc(0, 0, 200, 0, 360 * Math.PI / 180);
			canvasPen.stroke();
			canvasPen.restore();

			/**3.时针刻度**/
			canvasPen.save();
			canvasPen.strokeStyle = "green";
			for(var i = 0; i < 12; i++) {
				//旋转：每30度转一针.canvas效果为累加（叠加）不需要带参数i
				canvasPen.rotate(30 * Math.PI / 180);
				canvasPen.beginPath();
				//指针下端点到150
				canvasPen.moveTo(150, 0);
				//指针上端点到180
				canvasPen.lineTo(180, 0);
				canvasPen.stroke();
			}
			canvasPen.restore();

			/**4.分针刻度**/
			canvasPen.save();
			canvasPen.strokeStyle = "#4CAE4C";
			canvasPen.lineWidth = 10;
			for(var i = 0; i < 60; i++) {
				//旋转：如果在这里旋转需要更新if((i+1)%5!=0)
				canvasPen.rotate(6 * Math.PI / 180);
				//判断分钟不旋转填充
				//if(i % 5 != 0) {
				if((i + 1) % 5 != 0) {
					canvasPen.beginPath();
					canvasPen.moveTo(155, 0);
					canvasPen.lineTo(170, 0);
					canvasPen.stroke();
				}
				//旋转：每6度转一针，第一个画的度=6，需要在排除时针的0点先计算再进行旋转。
				//canvasPen.rotate(6 * Math.PI / 180);
			}
			canvasPen.restore();

			var canvasDate = new Date();
			var seconds = canvasDate.getSeconds();
			var minutes = canvasDate.getMinutes() + seconds / 60;
			var hours = canvasDate.getHours() + minutes / 60;
			//时间判断
			hours > 12 ? hours - 12 : hours;
			console.log("小时：", hours);
			/**4.时针**/
			canvasPen.save();
			canvasPen.lineWidth = 20;
			canvasPen.strokeStyle = "tomato";
			canvasPen.rotate(hours * 30 * Math.PI / 180);
			canvasPen.beginPath();
			canvasPen.moveTo(0, 0);
			canvasPen.lineTo(120, 0);
			canvasPen.stroke();
			canvasPen.restore();

			/**5.分针**/
			canvasPen.save();
			canvasPen.lineWidth = 15;
			canvasPen.strokeStyle = "#E38D13";
			canvasPen.rotate(minutes * 6 * Math.PI / 180);
			canvasPen.beginPath();
			canvasPen.moveTo(0, 0);
			canvasPen.lineTo(130, 0);
			canvasPen.stroke();
			canvasPen.restore();

			/**6.秒针**/
			canvasPen.save();
			canvasPen.lineWidth = 10;
			canvasPen.strokeStyle = "#C12E2A";
			canvasPen.fillStyle = "#C12E2A";
			canvasPen.rotate(seconds * 6 * Math.PI / 180);
			canvasPen.beginPath();
			canvasPen.moveTo(0, 0);
			canvasPen.lineTo(130, 0);
			canvasPen.stroke();
				//钟座
				canvasPen.beginPath();
				canvasPen.arc(0, 0, 20, 0, 360 * Math.PI / 180);
				canvasPen.fill();
				//画指针圆环
				canvasPen.beginPath();
				canvasPen.arc(145, 0, 12, 0, 360 * Math.PI / 180);
				canvasPen.stroke();
				canvasPen.restore();
			canvasPen.restore();
		}

	}
})

4.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=devide-width,initial-scal=1.0,user-scalable=no" />
		<title>canvas钟表组件</title>
	</head>
	<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/12-canvas-clock.css" />

	<body>
		<div id="wrap">
			<h1>canvas钟表组件</h1>
			<canvas id="wrap-canvas" width="500px" height="500px"></canvas>
			<h2>PS：一刀coder</h2>
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/12-canvas-clock.js"></script>

</html>

5.效果图