Use canvas to make the clock

Here Insert Picture Description
Background image
Here Insert Picture Description
Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Snow</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<canvas id='clock' width="420" height="420"></canvas>
		<script>
			var canvas = document.getElementById('clock');
			var ctx = canvas.getContext('2d');
			var width = ctx.canvas.width;
			var height = ctx.canvas.height;
			var r = width/2;
			ctx.translate(r,r);
			ctx.beginPath();
			ctx.lineWidth = 10;
			ctx.strokeStyle = "gray";
			ctx.arc(0,0,r-5,0,2*Math.PI,false);
			ctx.clip();
			setInterval(draw,1000);
			function drawBackGround(){
				ctx.save();
				var img = new Image();
				img.src = "img/01.jpg";
				img.onload = function(){
					ctx.drawImage(img,-210,-210,420,420);
					for (var i=1;i<=60;i++){
						drawClock(i);
					}
					// 设置字体
					ctx.font = "36px bold 黑体";
					// 设置颜色
					ctx.fillStyle = "red";
					// 设置水平对齐方式
					ctx.textAlign = "center";
					// 设置垂直对齐方式
					ctx.textBaseline = "middle";
					
					var date = new Date();
					var hour = date.getHours();
					var minute = date.getMinutes();
					var second = date.getSeconds();
					// 绘制文字(参数:要写的字,x坐标,y坐标)
					ctx.fillText(hour + " : " + minute, 0, 130);
					drawHour(hour,minute);
					drawMinute(minute);
					drawSecond(second);
					drawDot();
				}
				ctx.closePath();
				ctx.stroke();
			}
			function drawDot(){
				ctx.beginPath();
				ctx.fillStyle = '#ffff00'
				ctx.arc(0,0,5,0,2*Math.PI,true);
				ctx.fill();
			}
			function draw(){
				drawBackGround();
				ctx.clearRect(-210,-210,420,420);
				ctx.restore();
			}
			
			function drawClock(i){
				ctx.save();
				ctx.beginPath();
				var rad = 2*Math.PI/60 * i;
				ctx.rotate(rad);
				if(i%5 == 0){
					ctx.strokeStyle = '#ff0000';
					ctx.lineWidth = 6;
					ctx.moveTo(0,-180);
					ctx.lineTo(0,-r);
				}else{
					ctx.lineWidth = 6;
					ctx.strokeStyle = '#ffff00';
					ctx.moveTo(0,-190);
					ctx.lineTo(0,-r);
				}
				ctx.fill();
				ctx.stroke();
				ctx.restore();
			}
			
			function drawHour(hour,minute){
				ctx.save();
				ctx.beginPath();
				ctx.strokeStyle = '#ff0000';
				var rad = 2*Math.PI/12 * hour;
				var mrad = 2*Math.PI/12/60 * minute;
				ctx.rotate(rad + mrad);
				ctx.lineWidth = 6;
				ctx.moveTo(0,10);
				ctx.lineTo(0,-r/2);
				ctx.closePath();
				ctx.stroke();
				ctx.restore();
			}
			
			function drawMinute(minute){
				ctx.save();
				ctx.beginPath();
				ctx.strokeStyle = '#ffff00';
				var rad = 2*Math.PI/60 * minute;
				ctx.rotate(rad);
				ctx.lineWidth = 4;
				ctx.moveTo(0,10);
				ctx.lineTo(0,-r+70);
				ctx.closePath();
				ctx.stroke();
				ctx.restore();
			}
			
			function drawSecond(second){
				ctx.save();
				ctx.beginPath();
				ctx.strokeStyle = '#00aa00';
				ctx.fillStyle = '#00aa00';
				var rad = 2*Math.PI/60 * second;
				ctx.rotate(rad);
				ctx.lineWidth = 1;
				ctx.moveTo(-2,20);
				ctx.lineTo(2,20);
				ctx.lineTo(1,-r+50);
				ctx.lineTo(-1,-r+50);
				ctx.closePath();
				ctx.stroke();
				ctx.fill();
				ctx.restore();
			}
		</script>
	</body>
</html>

Published 456 original articles · won praise 17 · views 10000 +

Guess you like

Origin blog.csdn.net/zt2650693774/article/details/105207778