Native JS Canvas writes a real-time clock effect (including source code)

I believe that friends who have learned the new Canvas in HTML5 are very impressed by its powerful functions, which can help us do a lot of painting on the canvas and operations on graphics, so today I will take you to realize a simple real-time clock effect, including source code and note.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#myCanvas{
				display: block;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
        // 创建一个canvas画布
		<canvas id="myCanvas" width="500" height="500"></canvas>
		<script>
			// 获取canvas
			var cas = document.querySelector("#myCanvas");
			// 创建画布
			var gtx = cas.getContext("2d");
			// 创建准度
			var deg = Math.PI*2/360;
			
			// 设置钟表圆点
			gtx.translate(250,250);
			
			function waiUp(){
				// 绘制钟表最外面边框
				gtx.beginPath();
				gtx.StrokeStyle = "block";
				gtx.lineWidth = 10;
				gtx.arc(0,0,200,0,Math.PI*2);
				gtx.stroke();
				
				// 绘制钟表里面的刻度
				// sin -- 表示对边 : 斜边
				// cos -- 表示邻边 : 斜边
				
				// 创建60个圆点中每个需要的准度
				var degL = Math.PI*2/60;
				for(var i=0;i<60;i++){
					gtx.save(); // 存档
					// 创建圆点
					var x = Math.cos(degL * i)*(200-20);
					var y = Math.sin(degL * i)*(200-20);
					// console.log(x,y);
					gtx.beginPath();
					// 设置特殊刻度颜色
					if(i % 5 == 0){
						gtx.fillStyle = "pink";
					}else{
						gtx.fillStyle = "#000";
					}
					gtx.arc(x,y,5,0,Math.PI*2);
					gtx.fill();
					gtx.restore(); //回档
				}
				
				// 设置刻度上的数字
				// 设置数字样式
				gtx.beginPath();
				
				gtx.textAlign = "center";
				gtx.textBaseline = "middle";
				gtx.font = "bold 15px 宋体";
				// 设置数字的准度
				var degS = Math.PI*2/12;
				var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
				arr.forEach(function(obj,index){
					// gtx.save();
					// 设置坐标
					var x = Math.cos(degS * index) * (200-40);
					var y = Math.sin(degS * index) * (200-40);
					// console.log(x,y);
					// 设置文字
					gtx.fillStyle = "#000";
					gtx.fillText(obj,x,y);
				})
			}
				
			// 设置时针
			function shiUp(h,f){
				gtx.save();
				gtx.rotate(2 * Math.PI / 360 * -90);
				// 获取时针准度
				var shideg = 2 * Math.PI / 12 * h;
				// 获取分针准度
				var fendeg = 2 * Math.PI / 60 / 12 * f;
				gtx.beginPath();
				gtx.rotate(shideg + fendeg);
				gtx.lineCap = "round";
				gtx.lineWidth = 10;
				gtx.strokeStyle = "#284444";
				gtx.moveTo(-20,0);
				gtx.lineTo(80,0);
				gtx.stroke();
				gtx.restore();
			}
				
			// 设置分针
			function fenUp(f){
				gtx.save();
				gtx.rotate(2 * Math.PI / 360 * -90);
				// 获取分针准度
				var fendeg = 2 * Math.PI / 60 * f;
				gtx.beginPath();
				gtx.rotate(fendeg);
				gtx.lineCap = "round";
				gtx.lineWidth = 8;
				gtx.strokeStyle = "#d2deff";
				gtx.moveTo(-20,0);
				gtx.lineTo(100,0)
				gtx.stroke();
				gtx.restore();
			}

			// 设置秒针
			function miaoUp(s){
				gtx.save();
				gtx.rotate(Math.PI * 2 / 360 * -90);
				// 获取秒针准度
				var miaodeg = 2 * Math.PI / 60 * s;
				gtx.beginPath();
				gtx.rotate(miaodeg);
				gtx.lineCap = "round";
				gtx.lineWidth = 5;
				gtx.strokeStyle = "#000";
				gtx.moveTo(-20,0);
				gtx.lineTo(120,0)
				gtx.stroke();
				gtx.restore();
			}	
			
			function zhongUp(){
				// 设置中心圆点
				gtx.beginPath();
				gtx.fillStyle = "#ca9dcb";
				gtx.arc(0,0,10,0,360*deg);
				gtx.fill();
			}
				
			function addUp(){
				// 清空画布
				gtx.clearRect(-250,-250,500,500);
				var date = new Date();
				var hover = date.getHours();
				var min = date.getMinutes();
				var sed = date.getSeconds();
				
				waiUp();
				shiUp(hover,min);
				fenUp(min);
				miaoUp(sed);
				zhongUp();
			}
			addUp();
			setInterval(addUp,1000);
		</script>
	</body>
</html>

See the effect:

If you like it, try it!

Native JS Canvas writes a real-time clock effect (including source code)

Guess you like