分别利用html+js和canvas绘制时钟

最新推荐文章于 2024-04-20 19:07:05 发布
最新推荐文章于 2024-04-20 19:07:05 发布
阅读量1.6k 收藏 8
点赞数
分类专栏： 前端 文章标签： JavaScript时钟 canvas时钟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36185028/article/details/53786993
版权

分别利用原生JS和画布画出时钟

1.原生JS绘制始终

思路：

1）在body中构建好始终的静态DOM结构

2）在CSS中设置好DOM结构的样式

3）在js文件中设置DOM的运动样式

视图文件：

<div id="warp">
			<div class="clock">
				<!--钟表数字-->
				<div class="number">
					<div><span>1</span></div>
					<div><span>2</span></div>
					<div><span>3</span></div>
					<div><span>4</span></div>
					<div><span>5</span></div>
					<div><span>6</span></div>
					<div><span>7</span></div>
					<div><span>8</span></div>
					<div><span>9</span></div>
					<div><span>10</span></div>
					<div><span>11</span></div>
					<div><span>12</span></div>
				</div>
				<!--时针，分针，秒针-->
				<div id="hour"></div>
				<div id="minute"></div>
				<div id="seconds"></div>
				<div id="center"></div>
</div>

样式表文件：

* {
				margin: 0;
				padding: 0;
			}
			/*产生同心圆*/
			#warp {
				position: relative;
				width: 250px;
				height: 250px;
				margin: 20px auto;
				border-radius: 50%;
				background-image: -webkit-linear-gradient(top,#cee2e9,#777775);
			}
			#warp .clock {
				position: absolute;
				left: 10px;
				top: 10px;
				width: 230px;
				height: 230px;
				border-radius: 50%;
				background: #fff;
			}
			/*设置数字部分样式*/
			#warp .number {
				width: 100%;
				height: 100%;
				position: relative;
			}
			#warp .number div {
				position: absolute;
				left: 10px;
			    top: 112px;
			    width: 210px;
			    text-align: center;
			}
			#warp .number div span {
				display: block;
				width: 10px;
    				height: 22px;
			}
			/*设置时针样式*/
			#warp #hour {
				position: absolute;
				bottom: 110px;
				left: 114px;
				width: 6px;
				height: 80px;
				background: red;
				border-radius: 5px;
				transform-origin: 50% bottom;
			}
			/*设置分针样式*/
			#warp #minute {
				position: absolute;
				bottom: 110px;
				left: 115px;
				width: 4px;
				height: 90px;
				background: black;
				border-radius: 5px;
				transform-origin: 50% bottom;
			}
			/*设置秒针样式*/
			#warp #seconds {
				position: absolute;
				bottom: 110px;
				left: 116px;
				width: 2px;
				height: 110px;
				background: green;
				border-radius: 5px;
				transform-origin: 50% bottom;
			}
			/*设置时钟中心点*/
			#warp #center {
				position: absolute;
				left: 113px;
				bottom:106px ;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: black;
	}

Js文件：

window.onload = function(){
//设置数字键
function number(){
		//获取number标签
		var num = document.getElementsByClassName("number")[0];
		var divs = num.getElementsByTagName("div");
		var spans = num.getElementsByTagName("span");
		//每个数字旋转30度
		for (var i = 0;i < divs.length; i ++){
			var deg = i*30 + 120;
			divs[i].style.transform = "rotate("+(deg)+"deg)";
			spans[i].style.transform = "rotate("+(-deg)+"deg)";
		}
};
number();
//设置旋转
function run(){
	setInterval(function(){
		var nowDate = new Date();//获取时间
		var nowHours = nowDate.getHours();//获取小时
		var nowMinutes = nowDate.getMinutes();//获取分钟
		var nowSeconds = nowDate.getSeconds();//获取秒数
		//获取指针
		var hours = document.getElementById("hour");
		var minutes = document.getElementById("minute");
		var secondes = document.getElementById("seconds");
		secondes.style.transform = "rotate("+nowSeconds*6+"deg)";
		minutes.style.transform = "rotate("+nowMinutes*6+"deg)";
		hours.style.transform = "rotate("+(nowHours*30+nowMinutes*6/360*30)+"deg)";//时的度数，加上分钟度数占360的百分比乘以30度等于当前时针的度数
	},1000)
}
run();
}

最终效果：

2.利用canvas绘制时钟

思路：

1）在画布上绘制出时钟轮廓和秒格和小时格，以及数字

2）分别计算时针、分针和秒针运动角度

3）将绘制视图函数和运动函数封装到时针函数，在计时器中调用，每间隔1s重置画布

代码如下：

<body>
		<canvas id="can1" width="800" height="800"></canvas>
		<script type="text/javascript">
			var can1 = document.getElementById("can1");
			var ctx = can1.getContext("2d");//获取画笔
			//重置画布函数
			function reSet(){
				can1.height = can1.height;//每次清除画布，然后变化后的时间补上
				ctx.translate(400, 400);//设置坐标轴
				ctx.save();//保存中点坐标1
			}
			//绘制中心圆和外圆
			function circle(){
				//外面大圆
				ctx.lineWidth = 3;
				ctx.beginPath();
				ctx.arc(0, 0, 320, 0, 2 * Math.PI, true);
				ctx.closePath();
				ctx.stroke();
				//中心园
				ctx.beginPath();
				ctx.arc(0, 0, 10, 0, 2 * Math.PI, true);
				ctx.closePath();
				ctx.stroke();
			}
			//绘制字体
			function num(){
				var R = 270;//设置文字距离时钟中心点距离
				ctx.font = "32px arial";//设置字体样式		
				ctx.textBaseline = "middle";//字体上下居中，绘制时间
				for(var i = 1; i < 13; i++) {
					//利用三角函数计算字体坐标表达式
					var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2);
					var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2);
					var len = ctx.measureText(i);
					ctx.fillText(i, x - len.width / 2, y);//绘制字体，x-len.width/2使字体居中
				}
			}
			//绘制小格
			function smallGrid(){
				ctx.rotate(-Math.PI/2);//时间从3点开始，倒转90度
				for(var i = 0; i < 60; i++) {
					ctx.beginPath();
					ctx.rotate(Math.PI / 30);
					ctx.moveTo(300, 0);
					ctx.lineTo(320, 0);
					ctx.stroke();
				}
			}
			//绘制大格
			function bigGrid(){
				for(var i = 0; i < 12; i++) {
					ctx.lineWidth = 8;
					ctx.beginPath();
					ctx.rotate(Math.PI / 6);
					ctx.moveTo(310, 0);
					ctx.lineTo(290, 0);
					ctx.stroke();
				}
			}
			//指针运动函数
			function move(){		
				var t = new Date();//获取当前时间	
				var h = t.getHours();//获取小时
				h = h>12?(h-12):h;//将24小时制转化为12小时制	
				var m = t.getMinutes();//获取分针		
				var s = t.getSeconds();//获取秒针			
				ctx.save();//再次保存2
				ctx.lineWidth = 8;
				//旋转角度=30度*（h+m/60+s/3600）
				//分针旋转角度=6度*（m+s/60）
				//秒针旋转角度=6度*s
				ctx.beginPath();
				//绘制时针
				ctx.rotate((Math.PI/6)*(h+m/60+s/3600));
				ctx.moveTo(-20,0);
				ctx.lineTo(150,0);
				ctx.stroke();
				ctx.restore();//恢复到2,（最初未旋转状态）避免旋转叠加
				ctx.save();//3
				//画分针
				ctx.lineWidth = 5;
				ctx.beginPath();
				ctx.rotate((Math.PI/30)*(m+s/60));
				ctx.moveTo(-20,0);
				ctx.lineTo(250,0);
				ctx.stroke();
				ctx.restore();//恢复到3，（最初未旋转状态）避免旋转叠加
				ctx.save();
				//绘制秒针
				ctx.lineWidth = 2;
				ctx.beginPath();
				ctx.rotate((Math.PI/30)*s);
				ctx.moveTo(-20,0);
				ctx.lineTo(270,0);
				ctx.stroke();
			}
			//定义时钟函数
			function clock() {	
				reSet();
				num();
				smallGrid();
				bigGrid();
				circle();
				move();			
			}		
			//设置定时器，每1秒执行一次时钟函数
			setInterval(clock,1000);
		</script>
</body>

最终效果：



骑着代马去流浪
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+js手绘时钟动态效果
leaf_leaf__的博客
03-19 672
遇到的问题： 使用外链将js链入后网页上并不显示js部分的内容，后直接将js部分使用script标签写在html内 效果： 截图时间为下午16:25 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>4.1手绘时钟</title> </head> <body> <h3>手绘时钟<.
使用canvas简单绘制时钟
weixin_49411859的博客
07-18 197
html部分： <canvas id="canvas" width="800" height="600"></canvas> js部分： class Clock { constructor(){ this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); } init(){
使用HTML5 Canvas绘制一个时钟
LiuZijian的博客o(^▽^)o
10-09 2304
HTML5的CanvasAPI绘制钟表，涉及圆形和角度以及时间对象。
微信小程序开发之——时钟-Canvas介绍(1)
最新发布
2401_84121674的博客
04-20 1074
/1- 使用 wx.createContext 获取绘图上下文 context//2-设置填充色//3-绘制图形形状//4-开始绘制},
HTML5：canvas制作时钟
02-22
每周定期有公开直播课，有业内大咖为你授业解惑，真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!
html5 画布绘制时钟
qq_37149421的博客
03-06 4609
用Html5实现时钟，包括转盘时钟和电子时钟，显示当前日期时间绘制步骤：（1）先获取画布，设置画布的大小；（2）在js中获取画布对象，获取画布的画笔对象，设置画笔的一些属性；（3）获取系统当前时间，转换成时分秒，用变量保存下来；（4）先画分钟刻度线，每6°画一条线，共60条刻度线（循环）；（5）画时钟刻度线，每30°画一条线，相对分针长一点粗一点，共12条线（6）画时针、分针和秒针，时针最短最粗，...
javascript+HTML5 canvas绘制时钟功能示例
10-17
主要介绍了javascript+HTML5 canvas绘制时钟功能,结合实例形式分析了javascript+HTML5 canvas数值运算、图形绘制与时间显示相关操作技巧,需要的朋友可以参考下
js+html5实现canvas绘制网页时钟的方法
11-23
本文实例讲述了js+html5实现canvas绘制网页时钟的方法，画的是一个可用于网页的、带摆的钟表，可以通过按钮调整其大小和位置，具体实现内容如下 <html> <head> <meta ...
JS+Canvas绘制时钟效果
10-22
总结来说，使用JavaScript和Canvas绘制时钟涉及的关键技术有：获取和设置Canvas上下文、时间的处理、坐标变换、路径绘制和线条样式控制。通过熟练掌握这些技术，你可以创建出各种复杂的图形和动画效果。
html5 canvas实现时钟
01-08
使用html5中的canvas，结合javascript实现时钟效果
网页时钟实现代码html5
凌语小辉
09-29 9225
canvas{position:absolute;top:0px;left:0px;} 时钟 //获取绘图对象 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var p_canvas = document.getElementById('p_canvas')
canvas画一个时钟
qq_44902858的博客
03-20 317
用canvas画一个时钟 今天就用canvas来画一个时钟，小白也能看懂哦，正好好久也没用这个东西了，今天就再来了解一下吧。 咱们先来看看效果吧，但这是静态图，实际上是可以动起来的 规定一下画布的宽度以及长度 <canvas id='mycanvas' width="600" height="600"></canvas> 现在就可以开始画了 <script> //获取元素 var mycanvas = document.getElem
基于canvas的原生JS时钟效果
findhappy117的博客
02-25 371
运用html5新增画布canvas技术，绘制时钟效果，无需引用任何插件，纯js。
使用Canvas制作风景时钟
liuyan11223的博客
07-06 278
Canvas制作风景时钟
HTML5学习记录-----canvas学习之钟表
javaSamBlog
11-22 519
canvas钟表代码， 欢迎大家有好点建议可以提。js高级扣扣群：170798851 欢迎来交流学习     git项目地址：https://github.com/Jonavin/HTML5_Study   /** * Created by Administrator on 2014-11-22. */ (function(win){ var doc = win.d...
js绘制时钟
09-15 224
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Canvas绘制时钟Demo</title> <style> #myCanvas{ ...
利用canvas画钟表
余光的博客
07-16 1251
canvas （HTML5新增标签） **什么是canvas？ Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。 首先贴出最终结果，...
绘制走动的时钟
itscassie_的博客
09-18 1149
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;Title&lt;/title&gt;         &lt;style&gt;             body
教你使用html+js手绘一个时钟
qq_42339210的博客
05-28 1727
一、先看一下实现的结果 二、html部分 html部分只使用了画布元素<canvas>，具体代码如下： <body> <canvas id="diagonal" width="200" height="200"></canvas> </body> 三、JavaScript部分 具体的时钟的绘制，以及时钟的动态效果都是由js实现的，具体代码如下： var canvas; function clock() { canvas = docume
js+html5实现canvas绘制网页时钟的方法.docx
01-19
该文档详细阐述了如何使用JavaScript和HTML5的Canvas API来实现一个动态的网页时钟，包括绘制钟表盘面、指针以及模拟摆动的钟摆。这个时钟允许用户通过按钮调整大小和位置，提高了用户体验。 在JavaScript中，`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值