JS中canvas应用———时钟的制作

最新推荐文章于 2024-10-29 11:34:01 发布

疯狂进击的二胖~

最新推荐文章于 2024-10-29 11:34:01 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

分类专栏： js小项目练习文章标签： canvas画时钟

本文链接：https://blog.youkuaiyun.com/qq_40896410/article/details/82191879

js小项目练习专栏收录该内容

3 篇文章

订阅专栏

博客围绕用canvas绘制时钟展开，虽内容简略，但核心聚焦于利用canvas这一前端技术来实现时钟绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时钟##

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			canvas{
				display: block;
				margin: 0 auto;
				/*border: solid 1px red;*/
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="800" height="800"></canvas>
		<script>
			var canvas=document.getElementById("canvas");
			var context=canvas.getContext("2d");
			var width=canvas.width;//定义全局的宽和高以及半径，设置为变量，方便后面使用
			var height=canvas.height;
			var r= width / 2;
			function fun(){//在这个函数中画了时钟的外部边框和刻度
				context.save()//调用save()保存当前环境的方法，在结束的时候记得调用restore()返回之前保存过的路径状态和属性
				context.translate(r,r);//调用translate()方法改变画布初始（0,0）坐标。改为（r,r)为画布初始的坐标。方便后面的代码编写
				context.beginPath();//开始绘制最外层边框
				context.strokeStyle="purple";//设置边框颜色
				context.lineWidth=12;//设置边框宽度
				context.arc(0,0,r-12,0, Math.PI * 2)//开始绘制形状
				context.closePath();//结束绘制路径
				context.stroke();//绘制圆的边框
				
				var hour=[3,4,5,6,7,8,9,10,11,12,1,2];//定义hour数组，存放的数字从画圆的初始位置绘制，所以从3开始
				for(var i=0;i<hour.length;i++){//遍历数组的长度
					var rad=Math.PI * 2 / 12 *i;   //算出每个小时数字在圆中的弧度,并定义一个变量去接收
					var x=Math.cos(rad)*(r-70);//每个小时的x横坐标值就等于半径*cos(弧度)
					var y=Math.sin(rad)*(r-70);//每个小时的y横坐标值就等于半径*sin(弧度)
					context.font="30px Arial";//设置字体大小及样式
					context.fillStyle="darkslategray";//设置字体颜色
					context.textAlign="center";//设置字体水平居中
					context.textBaseline="middle";//设置字体垂直居中
					context.fillText(hour[i],x,y)//写出字体
				}
				for(var j=0;j<60;j++){//画出刻度,同上
					var rad1=Math.PI * 2 / 60 * j;
					var x1=Math.cos(rad1)*(r-40);
					var y1=Math.sin(rad1)*(r-40);
					context.beginPath();
					if(j % 5 == 0){//刻度时小时的时候
						context.fillStyle="purple";
						context.arc(x1,y1,10,0,Math.PI*2);
						context.closePath();
						context.fill();
					}
					else{
						context.fillStyle="mediumslateblue";
						context.arc(x1,y1,5,0,Math.PI*2);
						context.closePath();
						context.fill();
					}
				}
			}
			function DrawHour(hour,minute){//画时针
				context.save();//画之前 保存环境
				context.beginPath();
				var rad = Math.PI * 2 / 12 * hour;	
				var radmin=Math.PI * 2 / 12 / 60 * minute;//这里要考虑分针对时针的影响
				context.lineWidth = 2;
				context.lineCap = "round";
				context.rotate(rad + radmin);//调用方法rotate（）旋转对应的弧度
				context.moveTo(-7,50);
				context.lineTo(4,45);
				context.lineTo(1,-r/2);
				context.lineTo(-3,-r/2+5);
				context.fill();
				context.restore();//画完之后返回之前的环境；
			}
			function DrawMinute(minute){//画分针，同上
				context.save();
				context.beginPath();
				context.fillStyle="indigo"
				var rad = Math.PI * 2 / 60 * minute;	
				context.lineWidth = 2;
				context.lineCap = "round";
				context.rotate(rad);
				context.moveTo(-5,50);
				context.lineTo(3,45);
				context.lineTo(2,-r+90);
				context.lineTo(-1,-r+95);
				context.fill();
				context.restore();
			}
			function DrawSecond(second){//画秒针
				context.save();
				context.beginPath();
				context.fillStyle="lightslategray"
				var rad = Math.PI * 2 / 60 * second;	
				context.lineWidth = 2;
				context.lineCap = "round";
				context.rotate(rad);
				context.moveTo(-3,50);
				context.lineTo(1,45);
				context.lineTo(1,-r+50);
				context.lineTo(-1,-r+55);
				context.fill();
				context.restore();
			}
			function DrawCenter(){//这里画了一个针的小圆点
				context.beginPath();
				context.fillStyle="black"
				context.arc(0,0,5,0,Math.PI * 2);
				context.closePath();
				context.fill();
			}
			function DrawAll(){//绘制所有的时候，调用所有的函数（并把定义好的参数传到对应的函数中）
				context.clearRect(0,0,width,height);//每次绘制完成后清空画布
				var date=new Date();//获取当前日期
				var hour=date.getHours();//获取当前日期的小时
				var minutes=date.getMinutes();//获取当前日期的分钟
				var second=date.getSeconds();
				fun();
				DrawHour(hour,minutes);
				DrawMinute(minutes);
				DrawSecond(second);
				DrawCenter();
				context.restore();//将返回之前的环境
			}
			DrawAll();//第一次显示时钟调用函数
			setInterval(DrawAll,1000)//采用定时器调用绘制所有的函数，让时钟动起来
		</script>
	</body>
</html>