【前端html/js】使用canvas实现实时时钟

最新推荐文章于 2023-04-17 23:20:47 发布
最新推荐文章于 2023-04-17 23:20:47 发布
阅读量647 收藏 1
点赞数 1
分类专栏： 学习 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zfy1999/article/details/122378370
版权

【前端html/js】使用canvas实现实时时钟

实现效果
效果

  • 代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飛宇时钟</title>
</head>
<body>
	<canvas id="canvas" width="800" height="600"></canvas>

	<script type="text/javascript">
		"use strict ";
		function getDatetime(){
			let da = new Date();
			let hours = da.getHours();
			hours=hours>12?hours-12:hours;
			let minute = da.getMinutes();
			let second = da.getSeconds();
			return [hours,minute,second];
		}
	</script>
	<script type="text/javascript">
		let canvas = document.getElementById('canvas');
		let ctx = canvas.getContext('2d');
		
		// 绘制刻度函数
		function scaleRender(deg,start,end,bw,color){
			ctx.beginPath();
			ctx.rotate(deg);		// 旋转
			ctx.moveTo(start,0);
			ctx.lineTo(end,0);
			ctx.lineWidth=bw;
			ctx.strokeStyle=color;
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
			ctx.save();
		}
		function initClockBasicInfo(){
			// 圆的中心的 x 坐标,圆的中心的 y 坐标,圆的半径,起始角，以弧度计,结束角，以弧度计。可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针
			// ctx.arc(400,300,200,0,2*Math.PI)
			ctx.beginPath();
			ctx.arc(0,0,200,0,2*Math.PI)
			ctx.strokeStyle="darkgrey";
			ctx.lineWidth=10;
			ctx.stroke();
			ctx.closePath();
			
			ctx.restore();
			ctx.save();
			
			// 绘制分钟刻度
			for(let j=0;j<60;j++){
				ctx.rotate(Math.PI/30)
				ctx.beginPath();
				ctx.moveTo(180,0);
				ctx.lineTo(190,0);
				ctx.lineWidth = 2;
				ctx.strokeStyle="orangered"
				ctx.stroke()
				ctx.closePath();
			}
			
			ctx.restore();
			ctx.save();
	
			// 绘制时钟刻度
			for(let i=0;i<12;i++){
				ctx.rotate(Math.PI/6)
				ctx.beginPath();
				ctx.moveTo(180,0);
				ctx.lineTo(200,0);
				ctx.lineWidth = 10;
				ctx.strokeStyle="darkgray"
				ctx.stroke()
				ctx.closePath();
			}
			
			ctx.restore();
			ctx.save();
			
			// 绘制时钟刻度数字
			for(let i=1;i<=12;i++){
				ctx.rotate((Math.PI/6));
				ctx.save();
				ctx.beginPath();
				ctx.translate(165,-4);
				ctx.rotate(Math.PI/2-(Math.PI/6)*i);
				ctx.strokeStyle="skyblue"
				// ctx.strokeText((i,150,0)
				ctx.fillText(i, 0, 0);
				// ctx.stroke(); 
				ctx.closePath();
				
				ctx.restore();
			}
			ctx.restore();
			ctx.save();
		}
		
		// 初始化时钟
		function initClock(){
			ctx.clearRect(0,0,800,600);
			ctx.save();
			// 将画布移动画布中央
			ctx.translate(400,300);
			ctx.rotate(-Math.PI/2)
			ctx.save();
			
			initClockBasicInfo();
			
			let time = getDatetime();
			
			// 绘制秒针
			scaleRender(Math.PI/30*time[2],-30,170,2,"coral");
			// 绘制分针
			scaleRender(Math.PI/30*time[1]+2*Math.PI/3600*time[2],-20,150,3,"darkblue");// 根据分针的时间进行旋转
			// 绘制时针
			scaleRender(Math.PI/6*time[0]+2*Math.PI/(12*60)*time[1] + 2*Math.PI/(12*3600)*time[2],
			-10,140,3,"darkslategray");// 根据时针的时间进行旋转
			
			// 
			ctx.beginPath();
			ctx.arc(0,0,2,0,Math.PI*2);
			ctx.strokeStyle="red";
			ctx.fill();
			ctx.stroke();
			ctx.closePath();
			
			ctx.restore();
			ctx.rotate(Math.PI/2)
			ctx.font="20px 微软雅黑";
			ctx.fillText(`${time[0]}:${time[1]}:${time[2]}`,-40,260);
			ctx.restore();
			
		}
		
		initClock();
		
		setInterval(function(){
			initClock();
		},1000);
		
	</script>

</body>
</html>

贴图版时钟效果

html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="full-screen" content="yes">
<meta charset="utf-8">
<title>飛宇时钟</title>
<script src="js/07clock.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	*{margin: 0;padding: 0;box-sizing: border-box;}
	body{
		display: flex;flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	@media screen and (max-width: 800px){
		body{
			width: 100vw;height: 100vh;overflow: overlay;
		}
	}
</style>
</head>
<body>
	<canvas id="clock" width="400" height="400"></canvas>
</body>
</html>

07clock.js 代码

window.onload = function(){
	const disk = './image/clock/';
	function getDatetime(){
		let da = new Date();
		let hours = da.getHours();
		let minute = da.getMinutes();
		let second = da.getSeconds();
		return [hours,minute,second];
	}
	function timeleng(a){
		return a.toString().padStart(2,'0');
	}
	
	const canvas = document.getElementById('clock');
	let ctx = canvas.getContext('2d');
	let time = getDatetime();
	
	
	const dataImgs = ['time-number.png','hours.png','minute.png','circle-bottom.png',
	'second.png','circle-center.png','circle-top.png'];
	let numberImg = new Image();
	let hourImg = new Image();
	let minuteImg = new Image();
	let secondImg = new Image();
	let circleBottomImg = new Image();
	let circleCenterImg = new Image();
	let circleTopImg = new Image();
	
	
	// 图片全部加载完毕
	numberImg.src=disk+dataImgs[0];
	numberImg.onload = function(){
		hourImg.src=disk+dataImgs[1];
		hourImg.onload = function(){
			minuteImg.src=disk+dataImgs[2];
			minuteImg.onload = function(){
				circleBottomImg.src=disk+dataImgs[3];
				circleBottomImg.onload = function(){
					secondImg.src=disk+dataImgs[4];
					secondImg.onload = function(){
						circleCenterImg.src=disk+dataImgs[5];
						circleCenterImg.onload = function(){
							circleTopImg.src=disk+dataImgs[6];
							circleTopImg.onload = function(){
								initClock();
								setInterval(()=>{
									time[0]=time[0]>12?time[0]-12:time[0];
									initClock();
									time = getDatetime();
								},16);
							}
						}
					}
				}
			}
		}
	};
	
	
	// 刻画刻度
	function kedu(deg,start,end,size=1){
		ctx.rotate(deg);
		ctx.beginPath();
		ctx.moveTo(start,0);
		ctx.lineTo(end,0);
		ctx.lineWidth=size;
		ctx.stroke();
		ctx.closePath();
	}
	
	// 图片中心旋转
	function centerRotateImage(x,y,deg,img,w,h){
		ctx.save();
		ctx.translate(x,y)
		ctx.rotate(Math.PI/180+deg);
		ctx.translate(-x,-y)
		ctx.beginPath();
		ctx.drawImage(img,0,0,w,h);
		ctx.closePath();
		ctx.restore();
	}
	
	// 初始化跟图片相关
	function timeImage(){
		ctx.save();
		let move = 18;
		ctx.translate(-move/2,-move/2)
		ctx.beginPath();
		ctx.drawImage(numberImg,0,0,numberImg.width+move,numberImg.height+move);
		ctx.closePath();
		ctx.restore();
		
		// 小时
		let hourRotate = Math.PI/30*3 + Math.PI/6*time[0] + Math.PI/1800*time[1] + 2*Math.PI/(3600*60)*time[2];
		centerRotateImage(move/2+200-4,move/2+200-4,hourRotate,hourImg,hourImg.width+move,hourImg.height+move);
		
		// 分钟
		let minuteRotate = (-Math.PI/30*13 + Math.PI/180) + Math.PI/30*time[1] + 2*Math.PI/3600*time[2];
		centerRotateImage(move/2+200,move/2+200,minuteRotate,minuteImg,minuteImg.width+move,minuteImg.height+move);
		
		// 底部
		centerRotateImage(move/2+200-4,move/2+200-4,0,circleBottomImg,circleBottomImg.width+move,circleBottomImg.height+move);
		
		// 秒
		let secondRotate=(-Math.PI/30*4 + Math.PI/3600*8) + Math.PI/30*time[2]  ;
		centerRotateImage(move/2+200,move/2+200,secondRotate,secondImg,secondImg.width+move,secondImg.height+move);
		
		// 中顶部
		centerRotateImage(move/2+200-4,move/2+200-4,0,circleCenterImg,circleCenterImg.width+move,circleCenterImg.height+move);
		centerRotateImage(move/2+200-4,move/2+200-4,0,circleTopImg,circleTopImg.width+move,circleTopImg.height+move);
	}
	
	// 初始化时钟
	function initClock(){
		ctx.clearRect(0,0,400,400);
		ctx.save();
		ctx.translate(200,200);
		ctx.save();
		
		ctx.beginPath();
		ctx.arc(0,0,192,0,Math.PI*2);
		ctx.lineWidth=5;
		ctx.stroke();
		ctx.closePath();
		
		ctx.restore();
		ctx.save();
		
		ctx.textAlign="center";
		// 绘制秒钟刻度
		for(let j=0;j<60;j++){
			kedu(Math.PI/30,178,190);
		}
		ctx.restore();
		ctx.save();
		
		ctx.textAlign="center";
		
		// 绘制分钟刻度
		for(let j=0;j<12;j++){
			kedu(Math.PI/6,170,190,6);
		}
		
		ctx.restore();
		ctx.restore();
		ctx.save();
		//  初始化跟图片相关
		timeImage();
		
	}
	
}

素材下载

-素材下载地址: https://github.com/finnfy/study/tree/master/canvas/image/clock

演示地址

https://www.0fy0.com/clock.html

演示效果

github
github贴图版

写于:2022年1月8日
作者QQ：420318184
邮箱:fy@0fy0.com

飛之宇
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【浪漫 罗盘时钟 Js、css实现（附源代码） 美化版本】，前端面试必问的HashMap
2301_76224223的博客
04-16 595
HL.ZHCNArr=[‘零’,‘一’,‘二’,‘三’,‘四’,‘五’,‘六’,‘七’,‘八’,‘九’,‘十’];this.els.date.html(yearStr+‘年’+monthStr+‘月’+dayStr+‘日’);大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。/* 小于 10 *//* 设置日期 *//* 设置小时 *//* 设置分钟 */
canvas画时钟
pumpkin_truck的博客
06-04 2502
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
canvas之时钟
时光清浅处，一步一安然
07-01 275
在画时钟之前，我们先来聊一聊canvas动画。 驱动动画的方法有以下三种：那么我们制作canvas动画使用哪种更好呢？所以在制作canvas动画时，更推荐使用。制作canvas动画的步骤：那么就让我们看看时钟的动画制作吧： 效果如下：
＜canvas＞利用Canvas绘制简易版挂钟
m0_48465196的博客
02-22 652
使用Canvas绘制一个挂钟
javascript通过canvas实现不同时区的时钟绘制
最新发布
觉醒法师的专栏
04-17 1268
这里使用Javascript的class和canvas技术实现时钟的绘制，并且通过类实例来实现不同时区的时间显示，增强复用性。
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
weixin_29268385的博客
06-03 761
插件描述：thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作，模拟现实生活中的时钟。并且它还具有定时闹钟的功能。使用该模拟时钟插件首先需要引入jQuery和jquery.thooClock.js文件。可以使用一个空的来作为时钟的容器。在页面DOM元素加载完毕之后，可以通过thooClock()方法来初始化该...
javascript canvas实现简易时钟例子
10-14
综上所述，这个JavaScript Canvas实现的简易时钟例子，通过Canvas API的基本绘图功能，结合JavaScript的时间处理，成功地创建了一个实时更新的钟表。它展示了Canvas在动态图形和交互式界面设计中的强大潜力。对于想...
HTML5 Canvas粒子数字时钟特效.zip
11-18
在这个“HTML5 Canvas粒子数字时钟特效”中，我们看到的是一个利用Canvas API实现的创意时钟，它通过粒子动画的形式展示时间。这个特效结合了CSS、JavaScript（可能包括jQuery库）以及HTML5的Canvas元素，为网页增添...
HTML5 Canvas爱心时钟代码
06-24
在这个爱心时钟的实现中，开发者可能首先会创建一个基于Canvas的时钟结构，包括时钟的圆心、半径和分针、时针、秒针的位置计算。时钟的指针通常是以角度表示，通过当前时间转换为角度后，使用`arc`方法画出指针。...
HTML5 Canvas日期圆形时钟代码.zip
11-18
总结，"HTML5 Canvas日期圆形时钟代码"是一个结合HTML5 Canvas、CSS和可能的jQuery技术的示例，展示了如何使用JavaScript动态地在网页上绘制一个功能齐全的时钟。通过学习这个实例，开发者可以更好地理解和掌握...
HTML5 Canvas圆形灯笼时钟动画特效.zip
11-18
这个“HTML5 Canvas圆形灯笼时钟动画特效”是一个利用Canvas API创建的交互式时钟示例，结合了CSS、JavaScript和jQuery技术，为用户提供了视觉上的吸引力和动态体验。 首先，我们来看HTML5 Canvas的基础。Canvas是...
前端框架时间插件
05-16
bootstrap使用的第三方时间插件，包含样式和js
前端时钟效果
06-28
自己做的前端时钟，有兴趣的可以探讨一下。前端工作师，主要css3 html5的动画效果
Html5基于Canvas画一个动态时钟
qq_35543489的博客
02-03 1372
文章目录前言一、前期准备二、绘制刻度1.流程2.效果图三、绘制文字1.流程2.效果图四、绘制指针1.取得当前时间2.绘制秒针3.绘制分针4.绘制时针5.效果图五、绘制圆心1.流程2.效果图六、让钟表动起来总结 前言 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。 一、前期.
Js实现实时显示系统时间（获取当前时间并显示）
热门推荐
琅枫的博客
04-19 3万+
js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，在使用innerHTM方法显示。 首先我们来了解一下js获取当前时间所需的一些方法： 获取当前时间： var d = new Date();//获取系统当前时间 获取特定格式的时间： 1、获取当前年份 getYear()方法：可以获取年份（2位或4位），其返回值是表示当前Date 对象的年份字段 说明：当年
For循环-九九乘法表/九九偶数乘法表/九九奇数乘法表
qq_45579661的博客
09-12 776
1.九九乘法表 2.九九偶数乘法表 3.九九奇数乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
前端代码编写小时钟
zst0910的博客
03-31 1140
前端代码编写小时钟 没有用到图片，指针也是自己用自己写的。主要难度就在于指针位置的固定与旋转。 * { margin: 0; padding: 0; } #one { display: flex; justify-content: center; align-items: center; margin: 0 auto;
web前端之时钟(css+js)
一个假胖子
10-23 7573
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;时钟&lt;/title&gt; &lt;style type="text/css"&gt; .clock_box{ wi
前端 | 如何用html编写动态时钟
Kni9hT's Blog
06-19 4242
前段时间在网上冲浪的时候看到了一个挺有意思的动态时钟图片,效果图如下: 今天有空整理一下结果发现找不到原来的帖子了… 附上dalao写的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ backgroun
用html/js/canvas实现圣诞老人和麋鹿
03-28
抱歉，作为AI语言模型，我无法为您提供HTML / JS / Canvas编程的完整解决方案。我可以给您一些指南，帮助您开始编写这个项目。 1. 创建一个HTML文档，并在其中添加一个canvas元素。 2. 使用JavaScript获取canvas元素的上下文。 3. 使用canvas上下文绘制圣诞老人和麋鹿。您可以使用canvas上下文的绘图方法，例如arc（）和rect（）来绘制形状和路径。您还可以使用canvas上下文的图像方法，例如drawImage（）来绘制图像。 4. 为您的圣诞老人和麋鹿添加动画。您可以使用JavaScript的setInterval（）或requestAnimationFrame（）函数循环绘制画布，并在每个循环中更新形状和位置。 5. 在HTML中添加一些控件，例如按钮或复选框，以允许用户与动画交互。 这只是一个大概的指南，但希望它可以为您提供一些启示。如果您需要更具体的代码或指导，请参考JavaScript和HTML / Canvas的在线教程或文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飛之宇

你的支持是我们的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值