canvs绘制动态时钟

最新推荐文章于 2024-04-20 19:07:05 发布
最新推荐文章于 2024-04-20 19:07:05 发布
阅读量457 收藏
点赞数
分类专栏： HTML/CSS JS canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014041540/article/details/79084680
版权
JS 同时被 3 个专栏收录
35 篇文章 0 订阅
订阅专栏
HTML/CSS
34 篇文章 0 订阅
订阅专栏
canvas
2 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id='draw' width="200" height="200">A draw canvas</canvas>
		<script>
				
				
		let draw = document.getElementById('draw');
		let context = draw.getContext('2d');
		let angle =  Math.PI/360;
		var DateTime = {
					
						initDial: function(){
							context.save();
							context.beginPath();
							context.arc(100, 100, 99, 0, 2*Math.PI, false);
							
							context.moveTo(194, 100);
							
							context.arc(100, 100, 94, 0, 2*Math.PI ,false);
							
							//移动坐标原点，便于计算
							context.translate(100,100);
							context.moveTo(0,0);
								
							context.font = 'bold 14px Arial';
							context.textAlign = 'center';
							context.textBaseline = 'middle';
							//确定时刻的位置，根据相对的sin、cos、指针半径长度角度定
							let  cos60 = Math.cos(2*angle*60)*85;
							let  cos30 = Math.cos(2*angle*30)*85;
							
							let sin60 = Math.sin(2*angle*60)*85;
							let sin30 = Math.sin(2*angle*30)*85;
							
							context.fillText('12', 0, -85);
							context.fillText('1', cos60, -sin60);
							context.fillText('2', cos30, -sin30);
							
							
							context.fillText('3', 85, 0);				
							context.fillText('4', cos30, sin30);
							context.fillText('5', cos60, sin60);
			
							
							context.fillText('6', 0, 85);
							
							context.fillText('7',-cos60, sin60);
							context.fillText('8',-cos30, sin30);
							context.fillText('9', -85, 0);
							
							context.fillText('10', -cos30, -sin30);
							context.fillText('11', -cos60, -sin60);
							
							context.strokeStyle = '#4DB3FF';
										
							context.stroke();
							context.restore();
						},
					
						initmin: function(){
							let min = new Date().getMinutes();
//							console.log(min);
							context.save();
							context.beginPath();
							context.translate(100,100);
							context.moveTo(0,0);
						
							context.rotate(2 * Math.PI / 60 * min);
//							context.rotate(Math.PI/2);

							context.lineTo(0,-85);
							context.lineWidth = 2;
							context.stroke();
							context.restore();
						},
						inithour : function (){
							
							let hour = new Date().getHours();
							let min = new Date().getMinutes();
							context.save();
							context.beginPath();
							hour = hour>12 ? hour-12 : hour;
							context.translate(100,100)
							context.moveTo(0,0);
							//小时的弧度加上时间的偏移量
							context.rotate(2 * Math.PI / 12*hour + 2 * Math.PI /60 *min /12);
							context.lineTo(0, -65);
							context.lineWidth = 3;
							context.lineCap = 'round';
							context.stroke();
							context.restore();
						},
						initsec : function(){
							let sec = new Date().getSeconds();
							context.save();
//							console.log(sec);							
							context.beginPath();
							//移动坐标原点
							context.translate(100,100)
							context.rotate(2 * Math.PI / 60*sec);
							context.moveTo(-2, 0);							
							context.lineTo(2,0);
							context.lineTo(1,-90);
							context.lineTo(-1,-90);


							context.fillStyle = 'red';

							context.fill();
							context.restore();
						}
				}

				function autotime(){
				    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
					DateTime.initDial();
					DateTime.inithour();
					DateTime.initmin();
					DateTime.initsec();
					clearTimeout(t);
					var t = setTimeout(function(){
						autotime()
					},1000)
				}				
				autotime();	

		</script>
	</body>
</html>

swrd2014
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
做一个时钟
raoxg1986的专栏
01-03 379
 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;namespace WindowsAp
Canvas绘制一个时钟
秃头小桂子
05-11 2229
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas实现时钟
m0_56274171的博客
07-07 706
canvas实现时钟
微信小程序开发之——时钟-Canvas介绍(1)
最新发布
2401_84121674的博客
04-20 1079
/1- 使用 wx.createContext 获取绘图上下文 context//2-设置填充色//3-绘制图形形状//4-开始绘制},
Canvas实现简单时钟表盘
qq_31808873的博客
05-15 521
Canvas绘制表盘
canvas之时钟
时光清浅处，一步一安然
07-01 275
在画时钟之前，我们先来聊一聊canvas动画。 驱动动画的方法有以下三种：那么我们制作canvas动画使用哪种更好呢？所以在制作canvas动画时，更推荐使用。制作canvas动画的步骤：那么就让我们看看时钟的动画制作吧： 效果如下：
canvas绘制动态时钟
weixin_44049725的博客
12-26 267
使用元素不是非常难，但需要一些基本的HTML和JavaScript知识。 我们来利用canvas 画布元素和js结合绘制一个时钟，先上效果图： 画图之前，先把思路捋一遍：首先分解一下这个时钟的图形，它是由表盘（圆形）和指针（直线）组成。然后我们就按部就班一步一步进行绘制就可以了。 完整代码如下： <!DOCTYPE html> <html lang="en"> <h...
JS+Canvas绘制动态时钟效果
10-19
为了让时钟动态显示，我们需要在`draw`函数内部添加一个定时器，每隔一定时间（例如1秒）调用一次`draw`，这样时钟就会实时更新。 ```javascript setInterval(draw, 1000); ``` 至此，我们就完成了使用JavaScript...
canvas绘制表盘时钟
08-31
为了使时钟动态更新，我们需要将`clock`函数放入一个定时器，这里使用了`setInterval`方法，设置每隔一定毫秒（通常是1000毫秒即1秒）执行一次`clock`函数，确保时钟与实际时间同步。 此外，为了提高可读性和视觉...
使用canvas绘制超炫时钟
09-28
最后，为了使时钟动态显示时间，我们需要编写一个函数，每隔一段时间更新时钟的指针位置。这可以通过JavaScript的setInterval函数实现，不断地调用一个函数来更新时针和分针的位置。不过，这部分代码在给出的示例中...
canvas 绘制圆形时钟
08-31
为了绘制时钟的背景，我们定义了一个名为`drawBackground`的函数。这个函数会画出一个圆圈作为时钟的外框，标注小时数字，并绘制60个小圆点表示分钟刻度： ```javascript function drawBackground() { ctx.save();...
canvas绘制时钟
qq_41985405的博客
06-07 187
canvas绘制时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'></meta> </head&g
canvas画时钟
pumpkin_truck的博客
06-04 2503
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
使用canvas绘制时钟
NanChen的博客
09-09 460
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
如何使用h5元素“Canvas”来绘制一个简易的网页时钟（附代码）
weixin_75115821的博客
07-26 751
Canvas是HTML5中的一个元素，用于通过JavaScript和HTML绘制图形、动画和交互式内容。它可以在浏览器中创建和操作位图图像，使开发者可以在网页上实现高度个性化的视觉效果和交互体验。通过Canvas，开发者可以使用JavaScript来绘制图形、文本和图像。可以动态地更新画布上的内容，实现动画效果或响应用户的交互操作。Canvas提供了一组丰富的绘图函数和方法，使开发者可以在画布上绘制直线、矩形、圆形、路径等形状，并可以使用各种样式、颜色和渐变来装饰绘制的图形。
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)...
weixin_30725467的博客
03-23 1418
1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into...
简单的实现自定义View画一个钟表
偷偷看你的博客
04-24 916
自定义View画一个钟表      第一次看到别人的程序上面一个钟表自动走动感觉好神奇,好厉害的样子,然后就很感兴趣,自己鼓捣了一通,也明白了,理清思路其实很简单,下面来和大家一起分享一下我的思路.        首先确定一个圆心点和半径画一个圆,这个应该难不住聪明的你们吧,接下来要考虑的是圆上面钟表的刻度数字,这个想来发现挺的,怎么画?难道要知道每个小刻度线的横纵坐标?后来当我知道画布可
canvas时钟
喜欢文学的程序员
06-02 901
canvas是HTML5新增的组件，提供了新的javascript API。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。canvas就像是页面上的一块画布，而jav...
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas时钟</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function drawClock() { // 获取Canvas元素 var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); // 获取Canvas中心点坐标 var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制表盘 ctx.beginPath(); ctx.arc(centerX, centerY, 80, 0, 2 * Math.PI); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制刻度 for (var i = 1; i <= 12; i++) { var angle = i * Math.PI / 6; var x = centerX + 60 * Math.sin(angle); var y = centerY - 60 * Math.cos(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时针 var now = new Date(); var hour = now.getHours() % 12; var minute = now.getMinutes(); var second = now.getSeconds(); var hourAngle = (hour + minute / 60) * Math.PI / 6; var hourX = centerX + 40 * Math.sin(hourAngle); var hourY = centerY - 40 * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制分针 var minuteAngle = minute * Math.PI / 30; var minuteX = centerX + 60 * Math.sin(minuteAngle); var minuteY = centerY - 60 * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制秒针 var secondAngle = second * Math.PI / 30; var secondX = centerX + 60 * Math.sin(secondAngle); var secondY = centerY - 60 * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.strokeStyle = "red"; ctx.stroke(); } // 每秒钟更新时钟 setInterval(drawClock, 1000); </script> </body> </html> ``` 这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值