用canvas和Date实现一个钟

最新推荐文章于 2024-07-13 09:43:34 发布

Axs1

最新推荐文章于 2024-07-13 09:43:34 发布

阅读量194

点赞数

分类专栏： JS HTML 文章标签： canvas

本文链接：https://blog.csdn.net/Woyao01011/article/details/83011203

版权

JS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

源码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="500px" height="500px" style="border: #000000 solid 1px; display: block; margin: 50px auto; "></canvas>
		<!--dispaly:block;和margin:0 auto;可以实现画布居中-->
		<!--或者给他包裹一个父级的盒子，让这个父级盒子居中-->
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var deg=2*Math.PI/60;
			function watch(){
				//开始画表盘
				cxt.beginPath();//开始画笔
				cxt.lineWidth=2;//设置笔宽（线宽）
				var grd=cxt.createRadialGradient(250,250,10,250,250,200);
				grd.addColorStop(1,"gray");
				grd.addColorStop(0,"white");
				cxt.fillStyle=grd;
				cxt.arc(250,250,200,0,Math.PI*2);//(画一个圆)
				cxt.fill();//填充颜色，注意这一行的位置需在画圆的下面；
				cxt.stroke();//绘制上面定义的路径
				//结束画表盘
				//用for循环开始画时针
				for(var i=0;i<12;i++){
					cxt.save();//保存当前环境状态
					cxt.strokeStyle="black"
					cxt.translate(250,250);
					cxt.rotate(Math.PI*2/12*i);
					cxt.moveTo(0,190);
					cxt.lineTo(0,170);
					cxt.stroke();//开始执行上面的路径
					cxt.restore();//返回之前保存过的路径状态和属性
				};
				for(var i=0;i<60;i++){
					cxt.save();//保存当前环境状态
					cxt.beginPath();
					cxt.lineWidth=3;
					cxt.strokeStyle="black";
					cxt.translate(250,250);
					cxt.rotate(deg*i);
					cxt.moveTo(0,190);
					cxt.lineTo(0,180);
					cxt.stroke();//开始执行上面的路径
					cxt.restore();//将旋转后的图形放回画布
				};
			}
function Pointer(deg,Lwidth,color,mwidth){
	cxt.beginPath();
	cxt.save();//保存当前环境状态
	cxt.translate(250,250);//每一秒都要清除一次这个函数中的新添加上的画（指针），否则钟面上会残留下指针运动遗留的痕迹；
	cxt.rotate(deg);					//旋转角度
	cxt.strokeStyle=color;				//颜色
	cxt.lineWidth=Lwidth;				//指针宽度	
	cxt.moveTo(0,-mwidth);   			//指针半径
	cxt.lineTo(0,0);
	cxt.stroke();
    cxt.restore();
}
//save()	保存当前环境的状态。 restore()	返回之前保存过的路径状态和属性。
var i=0;
//获取时间，给指针一个初始角度
var nowDate=new Date();
var houer=(12+nowDate.getHours())%12*(Math.PI*2/12);
var minutes=nowDate.getMinutes()*(deg);
var Seconds=nowDate.getSeconds()*(deg);
setInterval(function(){
	i++;
	//在这里其实指针都是每秒都画过了一次，每秒也清除了一次
	cxt.clearRect(0,0,500,500);//每一秒都清除上一秒移动的轨迹
	watch();
	//秒针运动
	Pointer(deg*i+Seconds,2,"darkblue",180);
	//分针运动
	Pointer(deg/60*i+minutes,4,"black",120);
	//时针运动
	Pointer(deg/60/60/12*i+houer,8,"black",80);
},1000)
</script>
			}
		</script>		
</body>
</html>