canvas painting clock

Reference original text: https://www.cnblogs.com/zhaoliner/p/6098717.html
Realization effect: https://lixianshengchao.github.io/clock/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>时钟</title>
	</head>
	<style type="text/css">
		#bg { 
		    width: 150px;
		    height: 150px;
		    margin-top:75px;
		    background: url(photo.jpg);
		    border-radius:300px;
		    background-repeat:no-repeat;
		    background-size:contain;
		    position: absolute;
		    z-index: -1;
			animation: myRotate 10s linear infinite;
		}
		@-webkit-keyframes myRotate {
		0% {
		    -webkit-transform: rotateZ(0deg);
		    }
		70% {
		    -webkit-transform: rotateZ(0deg);
		    }
		100% {
		    -webkit-transform: rotateZ(360deg);
		    }
		}
		
	</style>
	<body>
		<div id="wrap" style="display: flex;justify-content:center;vertical-align:middle;">		
			<canvas id="canvas" style="position: absolute;"></canvas>
			<div id="bg"></div>
		</div>
	</body>
</html>
<script type="text/javascript">
	window.οnlοad=function(){
		
	
		
		var canvas=document.getElementById('canvas');
		var width=300;
		var height=300;
		canvas.width=width;
		canvas.height=height;
		var ctx=canvas.getContext('2d');
		var r=width/2; //半径
		setInterval(function(){
			render();
			drawGuid()
		},30/1000);	
		function drawGuid(){
	        /*
	           	画钟表指针
	         */
	        var now = new Date();
	        h = now.getHours();
	        m =now.getMinutes();
	        s = now.getSeconds();
	        drawHour(h,m);
	        drawMinute(m,s);
	        drawSecond(s);
	    }
		
		function render(){
			ctx.clearRect(0,0,width,height);
			ctx.save();
			ctx.translate(width/2,height/2);
			ctx.beginPath();
			ctx.lineWidth=r*0.05;//轮廓圆的宽度
			ctx.strokeStyle="#333";
			ctx.arc(0,0,r-r*0.05,0,2*Math.PI);//圆
			ctx.stroke();
			ctx.closePath();
			//画内圆
			ctx.beginPath();
			ctx.lineWidth=1;
			var radi2=r*0.85;//半径
			ctx.arc(0,0,radi2,0,2*Math.PI);//圆
			ctx.stroke();
			ctx.closePath();
			//画刻度，使用Math.sin(deg)、Math.cos(deg)来计算圆上点的坐标
			//每隔6度画一个点
			var hour=[6,5,4,3,2,1,12,11,10,9,8,7],i=0;
			for(var deg=0;deg<360;deg+=6){
				var posX=radi2*Math.sin(deg/360*2*Math.PI);
				var posY=radi2*Math.cos(deg/360*2*Math.PI);
				var posR=r*0.02;//刻度半径
				ctx.beginPath();
				ctx.fillStyle="#ccc";
				if(deg%30==0){
					ctx.fillStyle="#333";
					posR=r*0.025;
					var textX=(radi2*0.85)*Math.sin(deg/360*2*Math.PI);
					var textY=(radi2*0.85)*Math.cos(deg/360*2*Math.PI);
					ctx.font=r*0.1+'px Arial';
					ctx.textBaseline='middle;';//文字垂直对齐方式
					ctx.textAlign='center';
					ctx.fillText(hour[i],textX,textY);
					i++;
				}
				ctx.arc(posX,posY,posR,0,2*Math.PI);
				ctx.fill();
				ctx.closePath();
			}
			//画圆心
			ctx.beginPath();
			ctx.arc(0,0,r*0.05,0,2*Math.PI);
			ctx.stroke();
			
			ctx.restore();
		}
		
		function drawHour(h,m){
		    h = h + m/60;
		    ctx.save();
		    ctx.translate(width/2,height/2);
		    ctx.beginPath();
		    ctx.rotate(2*Math.PI/12*h);
		    ctx.lineWidth = r*0.05;
		    ctx.lineCap = "round";
		    ctx.moveTo(0,r*0.4*0.2);
		    ctx.lineTo(0,-r*0.4*0.8);
		    ctx.stroke();
		    ctx.closePath();
		    ctx.restore();
		}
		
		function drawMinute(m,s){
		    // 分针
		    m = m + s/60;
		    ctx.save();
		    ctx.translate(width/2,height/2);
		    ctx.beginPath();
		    ctx.rotate(2*Math.PI/60*m);
		    ctx.lineWidth = 3;
		    ctx.lineCap = "round";
		    ctx.moveTo(0,r*0.6*0.2);
		    ctx.lineTo(0,-r*0.6*0.8);
		    ctx.stroke();
		    ctx.closePath();
		    ctx.restore();
		}
		function drawSecond(s){
		    // 秒针
		    ctx.save();
		    ctx.beginPath();
		    ctx.translate(width/2,height/2);
		    ctx.rotate(2*Math.PI/60*s);
		    ctx.strokeStyle = "#ff004f";
		    ctx.lineWidth = 1;
		    ctx.lineCap = "round";
		    ctx.moveTo(0,r*0.8*0.2);
		    ctx.lineTo(0,-r*0.8*0.8);
		    ctx.stroke();
		    ctx.closePath();
		    ctx.restore();
		}
	
		
		
	
	}
	
</script>
canvas painting clock

Guess you like
