canvas时钟

最新推荐文章于 2023-10-25 09:53:12 发布

瓜皮前端

最新推荐文章于 2023-10-25 09:53:12 发布

阅读量93

点赞数

分类专栏：前端 canvas 文章标签： canvas

本文链接：https://blog.csdn.net/u013258556/article/details/102587123

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas" width="1000" height="600"></canvas>
		<script type="text/javascript">
			let canvas = document.getElementById('canvas')
			let ctx = canvas.getContext('2d')
			
			class Clock{
				constructor(s,m,h){
					this.ox = 500,
					this.oy = 300,
					this.r = 100,
					this.r2 = 90,
					this.s =  s; //秒
					this.m =  m; //分
					this.h =  h; //时
				}
				
				draw(){
					ctx.beginPath()
					ctx.arc(this.ox, this.oy, this.r, 0, Math.PI * 2, true)
					
					for(let i = 0; i < 60; i++) {
						ctx.moveTo(this.ox, this.oy)
						let x = Math.sin(i * Math.PI / 30) * this.r + this.ox
						let y = Math.cos(i * Math.PI / 30) * this.r + this.oy
	
						ctx.lineTo(x, y)
						ctx.stroke();
					}
	
					ctx.beginPath();
					ctx.fillStyle = '#fff';
					ctx.arc(this.ox, this.oy, this.r2, 0, Math.PI * 2, true)
					ctx.fill();
	
					ctx.beginPath();
					for(let i = 0; i < 12; i++) {
						ctx.moveTo(this.ox, this.oy)
						let x = Math.sin(i * Math.PI / 180 * 30) * this.r2 + this.ox
						let y = Math.cos(i * Math.PI / 180 * 30) * this.r2 + this.oy
	
						ctx.lineTo(x, y)
						ctx.stroke();
					}
					
					ctx.beginPath();
					ctx.fillStyle = '#fff';
					ctx.arc(this.ox, this.oy, this.r2-10, 0, Math.PI * 2, true)
					ctx.fill();
					
					this.setDate()
					
				}
				setDate(){
					// 时
					ctx.beginPath();
					ctx.moveTo(this.ox, this.oy)
					ctx.lineWidth = 3
					ctx.strokeStyle = "black"
					
					let hx = -Math.cos(-this.h * Math.PI / 30) * (this.r-30) + this.ox
					let hy = -Math.sin(-this.h * Math.PI / 30) * (this.r-30) + this.oy
					
					ctx.lineTo(hx, hy)
					ctx.stroke();
					// 分
					ctx.beginPath();
					ctx.moveTo(this.ox, this.oy)
					ctx.lineWidth = 2
					ctx.strokeStyle = "blue"
					
					let mx = -Math.sin(-this.m * Math.PI / 30) * (this.r-20) + this.ox
					let my = -Math.cos(-this.m * Math.PI / 30) * (this.r-20) + this.oy
					
					ctx.lineTo(mx, my)
					ctx.stroke();
					
					// 秒
					ctx.beginPath();
					ctx.moveTo(this.ox, this.oy)
					ctx.strokeStyle = "red"
					
					let sx = -Math.sin(-this.s * Math.PI / 30) * (this.r-10) + this.ox
					let sy = -Math.cos(-this.s * Math.PI / 30) * (this.r-10) + this.oy
					
					ctx.lineTo(sx, sy)
					ctx.stroke();
					
					ctx.strokeStyle = "black"
					ctx.lineWidth = 1
				}
				
			}
			
			
			
			setInterval(function(){
				let clock = new Clock(new Date().getSeconds(),new Date().getMinutes(),new Date().getHours())
				ctx.clearRect(0, 0, 1000, 600)
				clock.draw()
			},1000)
		</script>
	</body>

</html>