Canvas圆形时钟

时间:2022-07-26
本文章向大家介绍Canvas圆形时钟，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

  今天带来一个圆形时钟，用JQ编写的Canvas 代码。Canvas 的神奇之处就在于，可以自行绘制图片不需要外部引入，当你深入了解这项技术的时候，你也会忍不住赞叹他的神奇之处。

  虽然我一再强调，自学也是人生的一门必修课。但哪怕我接连几天不眠不休写出了 Canvas 教程，大家还是置若罔闻，要求我在代码中写下详细注释。从我的角度来讲：不写注释可以减少代码量，大批量的注释会显得十分冗余，我出的 Canvas 教程如果大家认真阅读、练习的话，读懂这些代码不成问题。就好像对着官方文档我可以手写JQuery，可离了官方文档我就是个弟弟。很多时候能看懂不一定能默写，我们要学习的是方法和思路。 这一篇Canvas动画里有非常详细注释，谨以此来慰问诸君对我的青睐，感谢！

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas圆形时钟</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<style type="text/css">
	#myCanvas {
		opacity: 0.8;
		-webkit-animation: roll 3s;
		animation: roll 3s;
	}
	@-webkit-keyframes roll {
		from{-webkit-transform:rotate(360deg);opacity:0;}
		to{-webkit-transform:rotate(0deg);opacity:0.8;}		
	}
	@keyframes roll {
		from{transform:rotate(360deg);opacity:0;}
		to{transform:rotate(0deg);opacity:0.8;}		
	}
</style>
</head>
<body>
<div style="width:150px;margin:150px auto;">
	<canvas id="myCanvas" width="150" height="150"></canvas>
</div>

  <!-- 时钟悬浮网页游动 -->
<!-- <script> 
var x = 50,y = 60;//图片距离顶部的位置 
var xin = true, yin = true 
var step = 1  //图片移动的步速 越高越快
var delay = 10 //图片移动延时 越高越慢
var obj=document.getElementById("myCanvas") 
function float() { 
var L=T=0
var R= document.documentElement.clientWidth-obj.offsetWidth //offsetHeight 则是网页内容实际高度
var B = document.documentElement.clientHeight-obj.offsetHeight // clientHeight 就是透过浏览器看内容的这个区域高度。
obj.style.left = x + document.documentElement.scrollLeft + "px";
obj.style.top = y + document.documentElement.scrollTop + "px";
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("float()", delay) 
obj.οnmοuseοver=function(){clearInterval(itl)} 
obj.οnmοuseοut=function(){itl=setInterval("float()", delay)} 
</script> -->

</body>
<script>
$(function(){
	var iNow = 0;
	var arr = ["#ffae00","black"];
	myClock();
	myday();
    setInterval(myClock,1000);//每一秒钟重绘一次	
		setInterval(myday,1000);
 function myday(){
 	var a = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
 	var week = new Date().getDay();
 	var dateDom=new Date();
	 	var year=dateDom.getFullYear();
	 	var month=dateDom.getMonth()+1;
	 	var day=dateDom.getDate();
	 	var mm=year+"-"+month+"-"+day;
	 	var myCanvas = document.getElementById("myCanvas");
		 	var cxt=myCanvas.getContext("2d");
	 	cxt.font="14px 黑体";
		//绘制实心字
		cxt.fillStyle="red";//填充红色
		cxt.fillText(mm,50,105);
 	for(var ind=0;ind<6;ind++){
 		if(week==ind){
 			var myCanvas = document.getElementById("myCanvas");
		 	var cxt=myCanvas.getContext("2d");
			cxt.font="14px 黑体";
			//绘制实心字
			cxt.strokeStyle="red";//填充红色
			cxt.strokeText(a[ind],55,55);
 		}
 }
}

    function myClock(){	
    	//得到年月日
    	
		var myCanvas = document.getElementById("myCanvas");		
		var oC = myCanvas.getContext("2d");
		//得到时分秒
		var now = new Date(),
		sec = now.getSeconds(),
		min = now.getMinutes(),
		hour = now.getHours();
		hour = hour>=12 ? hour-12 : hour;

		iNow++;
		iNow = iNow%2;		

		oC.save();//save():保存当前环境的状态
			//初始化画布
			oC.clearRect(0,0,myCanvas.width,myCanvas.height);//clearRect:在给定的矩形内清除指定的像素 
			oC.translate(75,75);//translate:重新映射画布上的 (0,0) 位置
			oC.scale(0.5,0.5);//scale:缩放当前绘图至更大或更小
			oC.rotate(-Math.PI/2);//rotate:旋转当前绘图
			 //  Math.PI: PI 属性就是 π，即圆的周长和它的直径之比
			//白色背景
			oC.save();
				oC.fillStyle = "#ccc";
				oC.beginPath();//beginPath:起始一条路径，或重置当前路径
				oC.arc(0,0,14+0,0,Math.PI*2,true);//arc:创建弧/曲线（用于创建圆形或部分圆）
				oC.fill();//fill:填充当前绘图（路径）
			oC.restore();//restore:返回之前保存过的路径状态和属性

			oC.strokeStyle = "#548B54";//strokeStyle:设置或返回用于笔触的颜色、渐变或模式
			oC.fillStyle = "black";//fillStyle:设置或返回用于填充绘画的颜色、渐变或模式
			oC.lineWidth = 4;//设置或返回当前的线条宽度
			oC.lineCap = "round";	//设置或返回线条的结束端点样式		

			//时针刻度
			oC.save();
				oC.beginPath();
				for(var i=0; i<12; i++){	
					oC.moveTo(110,0);//把路径移动到画布中的指定点，不创建线条
					oC.lineTo(120,0);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
					oC.rotate(Math.PI/6);//旋转当前绘图
				}
				oC.stroke();//绘制已定义的路径
			oC.restore();

			//分针刻度
			oC.save();
				oC.fillStyle = "black";
				oC.lineWidth = 2;
				oC.beginPath();
				for(var i=0; i<60; i++){
					if(i%5 != 0){
						oC.moveTo(116,0);
						oC.lineTo(120,0);
					}
					oC.rotate(Math.PI/30);
				}
				oC.stroke();
			oC.restore();			
			
			oC.save();
				oC.rotate(Math.PI/2);
				oC.font = "30px impact";
				//12点
				oC.fillText("12",-15,-80);	
				oC.fillText("1",40,-75);	//文本的 x 坐标位置,文本的 y 坐标位置		
				oC.fillText("2",80,-35);		
				//3点
				oC.fillText("3",88,13);					
				//6点
				oC.fillText("6",-8,104);				
				//9点
				oC.fillText("9",-103,11);					
			oC.restore();
			
			//画时针
			oC.save();
				oC.strokeStyle = "#ff3300";
				oC.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);	
				oC.lineWidth = 8;
				oC.beginPath();
				oC.moveTo(-20,0);
				oC.lineTo(60,0);
				oC.stroke();
			oC.restore();
			
			//画分针
			oC.save();
				oC.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
				oC.strokeStyle = "#27A9E3";
				oC.lineWidth = 6;
				oC.beginPath();
				oC.moveTo(-28,0);
				oC.lineTo(90,0);
				oC.stroke();
			oC.restore();

			//画秒针
			/*oC.save();
				oC.rotate(sec*Math.PI/30);
				oC.strokeStyle = "#D40000";
				oC.lineWidth = 3;
				oC.beginPath();
				oC.moveTo(-30,0);
				oC.lineTo(105,0);
				oC.stroke();
			oC.restore();*/
	
			//风车秒针
			oC.save();
				oC.rotate(sec*Math.PI/30);				

				oC.save();					
					oC.fillStyle = "#f23";
					oC.beginPath();
					oC.arc(94,0,10,0,Math.PI,true);
					oC.fill();
				oC.restore();

				oC.save();
					oC.rotate(Math.PI/2);
					oC.fillStyle = "#ffae00";
					oC.beginPath();
					oC.arc(10,-84,10,0,Math.PI,true);				
					oC.fill();
				oC.restore();

				oC.save();
					oC.fillStyle = "#27A9E3";
					oC.beginPath();
					oC.arc(74,0,10,Math.PI,Math.PI*2,true);
					oC.fill();
				oC.restore();

				oC.save();
					oC.rotate(Math.PI/2);
					oC.fillStyle = "#0eaf52";
					oC.beginPath();
					oC.arc(-10,-84,10,Math.PI,Math.PI*2,true);
					oC.fill();
				oC.restore();
			oC.restore()
			//风车秒针


			//表框
			oC.save();
				oC.lineCap = "butt";
				oC.lineWidth = 16;
				//调整边框样式
				oC.save();				
					oC.strokeStyle = "#BBFFFF";
					oC.beginPath();
					oC.arc(0,0,142,0,Math.PI*2,true);
					oC.stroke();
				oC.restore();

				oC.save();
					oC.strokeStyle = "#C0FF3E";
					oC.beginPath();
					oC.arc(0,0,142,0,Math.PI/iNow*5/3,true);
					oC.stroke();
				oC.restore();
			oC.restore();

			//中心点
			oC.save();
				oC.fillStyle = "#fff";
				oC.beginPath();
				oC.arc(0,0,4,0,Math.PI*2,true);
				oC.fill();
			oC.restore();
		oC.restore();
	};
});
</script>
</html>

  如果你不满足于简单的阅读和摘录，请从我的 Canvas 分栏中寻找 基础教程，自学也是人生的一门必修课，感谢你们陪伴至今，我为自己的零注释行为感动惭愧。

随机文章
本站知识点必读
最近更新