Canvas画表实现当前时间走动

最新推荐文章于 2023-08-23 20:28:01 发布
最新推荐文章于 2023-08-23 20:28:01 发布
阅读量332 收藏
点赞数 1
分类专栏： javaScript 文章标签： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43735788/article/details/84320725
版权 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	*{padding: 0;margin: 0;}
	div{
		width:400px;height:400px;
		position:relative;
		margin:100px auto;
	}
	canvas{
		background:white;
	}
</style>
</head>
<body>
<div>
	<canvas id="mycan" width="400px" height="400px"></canvas>
</div>
<script>
	var myCan=document.getElementById("mycan");
	var Can=myCan.getContext("2d");
	Can.translate(200,200);
	var str=[12,1,2,3,4,5,6,7,8,9,10,11];
	Can.rotate(-Math.PI/2);


	setInterval(function(){
		Can.clearRect(-200,-200,400,400);
		var data = new Date();
		var h = data.getHours();
		var f = data.getMinutes();
		var s = data.getSeconds();
		var hours=h*Math.PI/6+f*Math.PI/360+s*Math.PI/21600;
		var minutes=f*Math.PI/30+s*Math.PI/30/60;
		var seconds=s*Math.PI/30;

		Can.save();
		Can.beginPath();
		for(var i=0;i<60;i++){
			Can.strokeStyle="red";
			Can.moveTo(0,0);
			Can.arc(0,0,180,(Math.PI)/30*i,(Math.PI/30)*(i+1),false);
			Can.stroke();
		}
		Can.restore();

		Can.save();
		Can.beginPath();
		Can.fillStyle="white"
		Can.arc(0,0,172,0,Math.PI*2,false);
		Can.fill();
		Can.restore();

		Can.save();
		Can.beginPath();
		for(var i=0;i<12;i++){
			Can.lineWidth="3";
			Can.strokeStyle="red";
			Can.moveTo(0,0);
			Can.arc(0,0,180,(Math.PI)/6*i,(Math.PI/6)*(i+1),false);
			Can.stroke();
		}
		Can.restore();

		Can.save();
		Can.beginPath();
		Can.fillStyle="white"
		Can.arc(0,0,165,0,Math.PI*2,false);
		Can.fill();
		Can.restore();

		//时
		Can.save();
		Can.beginPath();
		Can.rotate(seconds);
		Can.lineWidth="1";
		Can.moveTo(0,0);
		Can.lineTo(150,0);
		Can.stroke();
		Can.restore();

		//分
		Can.save();
		Can.beginPath();
		Can.rotate(minutes);
		Can.lineWidth="3";
		Can.moveTo(0,0);
		Can.lineTo(120,0);
		Can.stroke();
		Can.restore();

		//秒
		Can.save();
		Can.beginPath();
		Can.rotate(hours);
		Can.lineWidth="5";
		Can.moveTo(0,0);
		Can.lineTo(90,0);
		Can.stroke();
		Can.restore();

		Can.save();
		Can.beginPath();
		Can.fillStyle="black"
		Can.arc(0,0,5,0,Math.PI*2,false);
		Can.fill();
		Can.restore();

		Can.save();
		Can.beginPath();
		Can.rotate(Math.PI/2)
		Can.textBaseline="middle";
		Can.textAlign="center";
		Can.font="bold 20px 微软雅黑";
		for(var i=0;i<str.length;i++){
			Can.fillText(str[i],150*Math.sin(i*Math.PI/6),-150*Math.cos(i*Math.PI/6));
		}
		Can.restore();
	},1000)		
</script>
</body>
</html>
贰年级小明
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas实现简单的时钟效果
JiangLittleBai的博客
01-21 1657
这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 完整实现效果截图如上 关键点 时钟效果的实现主要分为3部分 1、绘制表盘、大小刻度、1~12 等静态部分的绘制 2、展示当前时间 3、时针、分针和秒针动起来 绘制静态部分 首先得到canvas和canvas的绘图环境 var canvas=document.getElementById("canv
HTML5基于Canvas实现会跳舞的时间动画特效源码
09-02
它是一个可以和客户端同步的时钟，其特点是当时间走动时，数字将会散落成一个个粒子动画。彩色粒子的炸开与掉落动感十足。
uni-app+vue2 微信小程序 使用canvas绘制折线图/波形图
最新发布
hihiword的博客
08-23 1408
第二个，因为canvas坐标轴原点默认在左上角顶点，绘制过程中所有坐标点都是相对于该原点的，如果坐标有负数，则会超出canvas，像使用position超出盒子一样。是这样的：因为我需求是每个格子100个点，1024个点共11个格子，如果一个数据点占据一个像素，那么就需要1024个像素，但移动端显然不可能这么大。第四个，至此，格子已经 画好了，由于格子跟图形是分开的，不能互相影响。整体难度不大，但如果不了解canvas绘图原理，还是很麻烦的，如果看不懂文章，建议先去官网看看，有更好的讲述。
常用业务js组件：canvas绘图、时间戳转换、正则验证、深拷贝等
mosowe
03-03 970
先推荐一个npm包【mosowejs】，对没错，用我的专用名称命名的js，点击可以查看示例，手机，PC均可，内部包含了N多日常开发用到的： 正则验证（手机号，座机号，中英文，数字，url等等）， 常用的一些方法（时间格式化-年月日时分秒季度周数天数，数字千分位，数据脱敏，数据千分位，复制等等等）， 一些数据类型判断（移动端PC判断、object，number，string…） 常用canvas绘图（海报图，裁剪类的有涂抹裁剪，多边形裁剪）基于document开发，同类的跨端插件uniapp点此 支持NP
canvas 画布绘制时钟
周家大小姐
08-07 362
利用canvas绘制时钟的一个小demo。
canvas绘制当前时间时钟
sdh888hf的专栏
03-27 226
[code="html"] html5 clock var clockCanvas = document.getElementById("clock"); var c = clockCanvas.getContext("2d"); function clock(){ var date = new Date(...
canvas画布带时间的钟表
qq_41839784的博客
05-08 375
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <canvas id="sb" width="1000px" h...
Canvas人物跑步动画场景特效特效代码
03-20
我们可以为人物的不同跑步姿态准备多个图片，然后将它们组合成一个精灵表，通过改变当前帧来模拟跑步的动作。 创建动画时，我们还需要处理时间和帧率。CreateJS的`Ticker`类可以帮助我们控制每秒执行的帧数。我们...
用canvas画的会走的钟
08-11
"用canvas画的会走的钟"是一个典型的使用Canvas技术实现的互动性时钟示例，它不仅展示出Canvas的基本绘图功能，还涉及到时间同步和动画更新的知识点。以下是对这个主题的详细说明： 1. **Canvas API基础**： - `...
CSS3实现指针时钟走动特效.zip
11-17
在这个项目中，JavaScript负责获取当前时间，并更新时钟指针的角度。JavaScript事件监听器可能被用来在时间改变时触发更新，例如使用`setInterval`函数每秒或每毫秒更新一次指针的位置。 jQuery是一个流行的...
显示时间-canvas
09-12
使用html5新技术-canvas以及javascript语言，正确的显示时间，并根据时分秒的十位或者个位的变化，产生彩色的小球
html5 canvas实现时钟
01-08
使用html5中的canvas，结合javascript实现时钟效果
HTML5 canvas实现电子签名
04-06
NULL 博文链接：https://topmanopensource.iteye.com/blog/1544126
html5 canvas绘制时钟表时间.zip
07-04
html5 canvas绘制时钟表时间是一款用canvas精灵绘制器绘制的时钟表时间特效。
获取本地时间的Html5时钟特效
04-06
5. **绘制指针**：根据当前时间，计算出指针的角度，然后用`rotate()`方法旋转画布，再用`lineTo()`和`moveTo()`绘制指针。 6. **定时更新**：使用`setInterval()`函数，每秒或更短的时间间隔更新时间，并重新绘制...
HTML5 canvas数字时钟15种样式代码.zip
07-05
在这个项目中，JavaScript用于获取当前时间，并将时间信息绘制到canvas画布上。 3. **时间格式化**：在时钟示例中，JavaScript的Date对象被用来获取当前时间，包括小时、分钟和秒。这些数值通常需要格式化为两位数...
Canvas实现时间刻度标尺功能
绳墨BigHead
02-19 3461
Canvas实现时间刻度标尺功能 前言:项目中需要实现一个时间标尺的功能,展示某个人在某段时间内已经被订单占用的时间,并且展示当前订单在标尺中的占用位置,大概为下图的样子 大概的实现逻辑如下: 计算时间刻度跨度。canvas总宽度为320,高度为40,注意,canvas的宽度不能使用css来写,会导致计算混乱,直接写在标签内,一共显示8个时间区域，所以每个刻度之间的宽度为320/8=40 利用canvas画一条线,X轴起点为0,终点点为320,Y轴起终点都是25,只所以不放到最底下,是因为需要给显示时间
js+ canvas 实现人物走动
林大夏的专栏
11-19 4425
js+ canvas 实现人物走动
利用canvas.save()、canvas.restore()、canvas.translate()、canvas.rotate()绘制一个时钟表盘
一个写代码的胖子的博客
04-26 4285
Android绘制坐标系，原点在屏幕左上角，向右为x轴正方向，向下为y轴正方向。canvas.save(); 这个方法作用是将已经绘制的图像保存起来，让后续的操作就好像在一个新图层上操作一样。 canvas.restore(); 这个方法可以理解为合并图层的操作，作用是将save之后绘制的图像和save之前的图像进行合并。canvas.translate(); 这个方法理解成为坐标系的平移与翻转更加
tkinter canvas画表盘
06-07
好的，这里是一个简单的表盘画法示例，使用了Tkinter的Canvas组件： ``` import math import tkinter as tk # 创建画布并设置大小 root = tk.Tk() canvas = tk.Canvas(root, width=300, height=300) canvas.pack() # 画表盘外圆 canvas.create_oval(50, 50, 250, 250) # 画刻度线和数字 for i in range(1, 13): angle = math.pi/6 * i x1 = 150 + 100 * math.cos(angle) y1 = 150 - 100 * math.sin(angle) x2 = 150 + 120 * math.cos(angle) y2 = 150 - 120 * math.sin(angle) canvas.create_line(x1, y1, x2, y2) canvas.create_text(x2, y2, text=str(i)) # 获取当前时间并计算指针位置 time = '13:30:45' hour, minute, second = map(int, time.split(':')) hour_angle = math.pi/6 * (hour % 12) + math.pi/360 * minute minute_angle = math.pi/30 * minute second_angle = math.pi/30 * second # 画时针 x = 150 + 60 * math.cos(hour_angle) y = 150 - 60 * math.sin(hour_angle) canvas.create_line(150, 150, x, y, width=5, fill='red') # 画分针 x = 150 + 80 * math.cos(minute_angle) y = 150 - 80 * math.sin(minute_angle) canvas.create_line(150, 150, x, y, width=3, fill='blue') # 画秒针 x = 150 + 90 * math.cos(second_angle) y = 150 - 90 * math.sin(second_angle) canvas.create_line(150, 150, x, y, width=1, fill='green') # 运行主循环 root.mainloop() ``` 这个示例会创建一个300x300的画布，并在中心画一个直径为200的圆形表盘，然后画上12个刻度线和数字。最后根据当前时间计算时针、分针和秒针的位置，用不同颜色的线条画出来。 你可以根据需要调整表盘大小和颜色、指针长度和粗细等参数，来实现自己想要的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值