用canvas实现钟表展示当前时间

最新推荐文章于 2023-01-12 15:42:19 发布

m0_73591473

最新推荐文章于 2023-01-12 15:42:19 发布

阅读量221

点赞数

本文链接：https://blog.youkuaiyun.com/m0_73591473/article/details/127840832

版权

结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="600" height="400"></canvas>
	</body>
</html>

js

		let canvas = document.getElementById('canvas');
		canvas.style.border = '1px solid #000';
		canvas.style.display = 'block';
		canvas.style.margin = '50px auto';
		let cvs = canvas.getContext('2d');
		play();
		cvs.save();
		//开始创建钟表
		function play() {
			cvs.clearRect(0, 0, canvas.width, canvas.height);
			cvs.save();
			cvs.translate(300, 200);
			text();
			cvs.rotate(-90 * Math.PI / 180);
			yuan();
			move();
			cvs.restore();
			requestAnimationFrame(play);
		}
		//画圆
		function yuan() {
			cvs.beginPath();
			cvs.lineWidth = 12;
			cvs.arc(0, 0, 180, 0 * Math.PI / 180, 360 * Math.PI / 180);
			cvs.strokeStyle = '#111';
			cvs.stroke();
			for (let i = 0; i < 60; i++) {
				cvs.rotate(2 * Math.PI / 60);
				cvs.beginPath();
				cvs.lineCap = 'round';
				cvs.lineWidth = 4;
				cvs.strokeStyle = '#ccc'
				cvs.moveTo(170, 0);
				cvs.lineTo(158, 0)
				cvs.stroke();
			}
			for (let i = 0; i < 12; i++) {
				cvs.rotate(2 * Math.PI / 12);
				cvs.beginPath();
				cvs.lineCap = 'round';
				cvs.lineWidth = 3;
				cvs.strokeStyle = '#E43141'
				cvs.moveTo(170, 0);
				cvs.lineTo(153, 0)
				cvs.stroke();
			}
		}
		//运动之前先清除（覆盖）上一次的canvas样式
		function move() {
			let d = new Date(),
				m = d.getSeconds(),
				f = d.getMinutes(),
				s = d.getHours();
			cvs.save();
			cvs.save();
			cvs.save();
			cvs.beginPath();
			cvs.rotate((m * 6) * Math.PI / 180);
			cvs.moveTo(137, 0);
			cvs.lineTo(-30, 0);
			cvs.lineWidth = 4;
			cvs.strokeStyle = '#ccc';
			cvs.stroke();
			cvs.restore();
			cvs.beginPath();
			cvs.rotate(((f+m/60) * 6) * Math.PI / 180);
			cvs.moveTo(105, 0);
			cvs.lineTo(-30, 0);
			cvs.lineWidth = 4;
			cvs.strokeStyle = '#000';
			cvs.stroke();
			cvs.restore();
			let num = f / 60;
			cvs.beginPath();
			cvs.rotate(((s + num) * 30) * Math.PI / 180);
			cvs.moveTo(90, 0);
			cvs.lineTo(-30, 0);
			cvs.lineWidth = 4;
			cvs.strokeStyle = '#E43141';
			cvs.stroke();
			cvs.restore();
			cvs.beginPath();
			cvs.fillStyle = '#fff';
			cvs.arc(0, 0, 8, 0 * Math.PI / 180, 360 * Math.PI / 180);
			cvs.fill();
			cvs.beginPath();
			cvs.fillStyle = '#000';
			cvs.arc(0, 0, 3, 0 * Math.PI / 180, 360 * Math.PI / 180);
			cvs.fill();
			cvs.restore();
		}
		/*创建当前时间文本*/
		function text(){
			for(let i=0;i<12;i++){
				let arrtext=[3,4,5,6,7,8,9,10,11,12,1,2];
				cvs.beginPath();
				cvs.font = '20px 楷体';
				cvs.fillStyle = '#E43141';
				cvs.textAlign='center';
				cvs.textBaseline = 'middle';
				let x=Math.cos(i*30*Math.PI/180)*146;
				let y=Math.sin(i*30*Math.PI/180)*135;
				cvs.fillText(arrtext[i],x,y);
				cvs.stroke();
			}
		}