时钟练习

Posted INSTANCE_SELF

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了时钟练习相关的知识，希望对你有一定的参考价值。

  2. ##表盘

            1.初始化

                     将圆心调整到画布的中间

                     由于canvas中画圆与旋转所参照的坐标系于正常坐标系有出入

                             将整个画布逆时针旋转90度

                     初始化一些样式数据

                             ctx.lineWidth = 8;

                           ctx.strokeStyle = "black";

                           ctx.lineCap = "round";

           

            2.外层空心圆盘

                     圆盘颜色:#325FA2

                     圆盘宽度:14

                     圆盘半径:140

                    

            3.时针刻度

                     长度为20

                     宽度为8

                     外层空心圆盘与时针刻度之间的距离也为20

                    

            4.分针刻度

                     宽度为4

                     长度为3

                    

            5.时针

                     宽度为14

                     圆心外溢出80 收20

                    

            6.分针

                     宽度为10

                     圆心外溢出112 收28

                    

            7.秒针

                     颜色:D40000

                     宽度为6

                     圆心外溢出83 收30

                    

                     ---->中心实心圆盘

                             半径为10

                     ---->秒针头

                             96码开外半径为10的空心圆

                             宽度为6

     

    绘制钟表：

     demo地址：https://github.com/Hightinstance/practice/blob/master/Clocks/index.html

  3. <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
				background: pink;
			}
			#clock{
				background: gray;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
			}
		</style>
	</head>
	<body>
		<canvas id="clock" width="400" height="400"></canvas>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			//画表盘
			var clock = document.querySelector("#clock");
			if(clock.getContext)
			{
				var ctx = clock.getContext("2d");
				move();
				setInterval(function(){
					//每次清除画布
					ctx.clearRect(0,0,clock.width,clock.height);
					move();
				},1000);
			}
			function move(){
				//外圈
			ctx.save();
			//钟表样式
			ctx.lineWidth = 8;
		  	ctx.strokeStyle = "black";
		  	ctx.lineCap = "round";
            //中心点的坐标和坐标系转换
            ctx.translate(200,200);
            ctx.rotate(-90*Math.PI/180);
			ctx.beginPath();
			//画圆
			ctx.save();//存储外部表盘的样式
			ctx.strokeStyle = "#325FA2";
			ctx.lineWidth = 14;
			ctx.beginPath();
			ctx.arc(0,0,140,0,360);
			ctx.stroke();
			ctx.restore();
			
			
			//时针
//			长度为20
//		宽度为8
//		外层空心圆盘与时针刻度之间的距离也为20,画12个,旋转30度
           
            ctx.save();
            //相同的样式不需要清除
            for(var i=0;i<12;i++)
            {
             ctx.lineWidth = 8;  
			 ctx.beginPath();
			 ctx.moveTo(100,0);
			 ctx.lineTo(120,0);
			 ctx.stroke();
			 ctx.rotate(30*Math.PI/180);
			}
			ctx.restore();
			
			//分针同样的套路
			ctx.save();
            //相同的样式不需要清除
            for(var i=0;i<60;i++)
            {
             ctx.lineWidth = 4;  
			 ctx.beginPath();
			 ctx.moveTo(117,0);
			 ctx.lineTo(120,0);
			 ctx.stroke();
			 ctx.rotate(6*Math.PI/180);
			}
			ctx.restore();
			
			var date = new Date();
			var s = date.getSeconds();
			var m = date.getMinutes()+s/60;
			var h = date.getHours()+m/60;
			//12小时制
			h=h>12?h-12:h;
			
			
			//画分针，时针，秒针，
			//时针
			ctx.save();
			ctx.lineWidth = 14;
			ctx.rotate(h*30*Math.PI/180);
			ctx.beginPath();
			ctx.moveTo(-20,0);
			ctx.lineTo(80,0);
			ctx.stroke();
			ctx.restore();
			
			//分针
			ctx.save();
			ctx.lineWidth = 10;
			ctx.rotate(m*6*Math.PI/180);
			ctx.beginPath();
			ctx.moveTo(-28,0);
			ctx.lineTo(112,0);
			ctx.stroke();
			ctx.restore();
			
			//秒针
			ctx.save();
			ctx.lineWidth = 6;
			ctx.strokeStyle = "#D40000";
			ctx.fillStyle = "#D40000";
			ctx.rotate(s*6*Math.PI/180);
			ctx.beginPath();
			ctx.moveTo(-30,0);
			ctx.lineTo(83,0);
			ctx.stroke();
			//中心圆
			ctx.beginPath();
			ctx.arc(0,0,10,0,360);
			ctx.fill();
			//表头
			ctx.beginPath();
			ctx.arc(96,0,10,0,360);
			ctx.stroke();
			//秒针清空样式
			ctx.restore();
			//最后清空，坐标系和原点需要使用
			ctx.restore();
			}
			
			
		}
	</script>
</html>

    　　

 

以上是关于时钟练习的主要内容，如果未能解决你的问题，请参考以下文章

js练习时钟效果

js练习时钟效果

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

Python练习册 第 0013 题： 用 Python 写一个爬图片的程序，爬 这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段

50自定义View练习高仿小米时钟-使用Camera和Matrix实现3D效果

VIVADO时序分析练习