利用canvas画一个钟表（直接复制到编辑器运行即可）

let ctx = document.getElementById('canvas')
		
		if(ctx.getContext){
			let ctx = canvas.getContext('2d')
		
			//8 动起来
			setInterval(()=>{
				time()
			},1000)
			
			
			function time(){
				//1 画一个圆
				ctx.beginPath()
				ctx.arc(250,250,200,0,Math.PI*2)
				ctx.strokeStyle = 'darkorchid'
				ctx.lineWidth = 20
				ctx.stroke()
				ctx.fillStyle = 'white'
				ctx.fill()
				
				//2 画一个内圆
				ctx.beginPath()
				ctx.arc(250,250,20,0,Math.PI*2)
				ctx.fillStyle = 'white'
				ctx.fill()
				ctx.stroke()
				
				
				//3 画时针刻度
				for(var i = 0; i < 12; i++){
					kd(Math.PI/180*30*i,-190,-170,'black',10)
				}
				//4 画分针刻度
				for(var i = 0; i < 60; i++){
					kd(Math.PI/180*6*i,-190,-180,'black',5)
				}
				
				//5 画文字
				let text=[3,4,5,6,7,8,9,10,11,12,1,2]
				for(var i=0; i < 12; i++){
					// 计算文字坐标
					let x = Math.cos(Math.PI/180*30*i)*200*0.7+250;
					let y = Math.sin(Math.PI/180*30*i)*200*0.7+250;
					//设计文字样式
					ctx.font='20px 黑体';
					ctx.fillStyle='black';
					ctx.textAlign='center';
					ctx.textBaseline='middle';
					ctx.fillText(text[i],x,y)
				}
				
				
				//6 画表针
				let time = new Date()
				let h = time.getHours();//24小时制
				let m = time.getMinutes();
				let s = time.getSeconds();
				
				ctx.clearRect(0,0,0,0)
				
				//画时针
				//换算成十二小时制
				h = h>12 ? h-12+m/60 : h+m/60;
				kd(Math.PI/180*30*h,-100,40,'black',5)
				
				//画分针
				kd(Math.PI/180*6*m,-110,30,'red',3)
				
				//画秒针
				kd(Math.PI/180*6*s,-120,20,'green',1)
				
				//7 画一个表❤
				ctx.beginPath()
				ctx.arc(250,250,5,0,Math.PI*2)
				ctx.fill()
				ctx.stroke()
			}

			
			//封装刻度方法
			function kd(rotate,moveTo,lineTo,color,width){
				ctx.save()
				ctx.translate(250,250)
				ctx.rotate(rotate)
				ctx.beginPath()
				ctx.moveTo(0,moveTo);
				ctx.lineTo(0,lineTo);
				ctx.strokeStyle = 'color'
				ctx.lineWidth = width;
				ctx.stroke()
				ctx.restore()
			}		
		}else{
			console.log('浏览器版本过低，请更新浏览器！')
		}

运行结果如下：