时钟

最新推荐文章于 2022-04-12 20:08:13 发布
最新推荐文章于 2022-04-12 20:08:13 发布
阅读量218 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dear_zx/article/details/70275858
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Canvas绘制时钟</title>
	</head>
	<style type="text/css">
		div{
			text-align: center;
			margin-top:300px;
		}
		#canvas1{
			/*border: 1px solid #000000;*/
			
		}
	</style>
	<body>
		<div>
			<canvas id="canvas1" width="300px" height="300px"></canvas>			
		</div>

	</body>
	<script src="js/jquery-2.1.4.min.js"></script>
	<script>
		var dom=document.getElementById("canvas1");
		var ctx=dom.getContext('2d');
		
		var width=ctx.canvas.width;
		var height=ctx.canvas.height;
		var r=width/2;
		var rem=width/200;
		function draw(){
			ctx.save();
			ctx.translate(r,r);
			ctx.beginPath();
			ctx.lineWidth=10*rem;
			ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
			ctx.stroke();
			ctx.font=18*rem+"px Arial";
			ctx.textAlign="center";
			ctx.textBaseline="middle";
			var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
			hourNumbers.forEach(function(number,i){
				var rad=2*Math.PI/12*i;
				var x=Math.cos(rad)*(r-30*rem);
				var y=Math.sin(rad)*(r-30*rem);
				ctx.fillText(number,x,y);
			});
			for(i=0;i<60;i++){
				var rad=2*Math.PI/60*i;
				var x=Math.cos(rad)*(r-16*rem);
				var y=Math.sin(rad)*(r-16*rem);
				ctx.beginPath();
				if(i%5===0){
					ctx.fillStyle="#000";
					ctx.arc(x,y,2*rem,0,2*Math.PI,false);
				}else{
					ctx.fillStyle="#ccc";
					ctx.arc(x,y,2*rem,0,2*Math.PI,false);
				}
				
				ctx.fill();
			}
		}
		function drawHour(hour,minute){
			ctx.save();
			ctx.beginPath();			
			var rad=2*Math.PI/12*hour;
			var mrad=2*Math.PI/12/60*minute;
			ctx.rotate(rad+mrad);
			ctx.lineWidth=6*rem;
			ctx.lineCap="round";
			ctx.moveTo(0,10*rem);
			ctx.lineTo(0,-r/2);
			ctx.stroke();
			ctx.restore();
		}
		function drawMinute(minute){
			ctx.save();
			ctx.beginPath();
			var rad=2*Math.PI/60*minute;
			ctx.rotate(rad);
			ctx.lineWidth=3*rem;
			ctx.lineCap="round";
			ctx.moveTo(0,10*rem);
			ctx.lineTo(0,-r+35*rem);
			ctx.stroke();
			ctx.restore();
			
		}
		function drawSecond(second){
			ctx.save();
			ctx.beginPath();
			ctx.fillStyle="#c14547";
			var rad=2*Math.PI/60*second;
			ctx.rotate(rad);
			/*ctx.lineWidth=3;
			ctx.lineCap="round";*/
			ctx.moveTo(-2*rem,20*rem);
			ctx.lineTo(2*rem,20*rem);
			ctx.lineTo(1,-r+16*rem);
			ctx.lineTo(-1,-r+16*rem);
			
			//ctx.lineTo(0,-r+35);
			ctx.fill();
			ctx.restore();
		}
		/*function drawDot(){
			ctx.beginPath();
			ctx.fillStyle="#fff";
			ctx.arc(0,0,3*rem,0,2*Math.PI,false);
		}*/
		function drawrap(){
			ctx.clearRect(0,0,width,height);
			var now= new Date();
			var hour=now.getHours();
			var minute=now.getMinutes();
			var second=now.getSeconds();
			draw();
			//drawDot();
			drawHour(hour,minute);
			drawMinute(minute);
			drawSecond(second);
			ctx.restore();
		}
		
		drawrap();
		setInterval(drawrap,1000);
	</script>
</html>

dear_Zzzx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制时钟
qq_35832558的博客
04-18 240
Canvas绘制时钟 div{ text-align: center; margin-top:300px; } #canvas1{ /*border: 1px solid #000000;*/ } var dom=document.getElementById("canvas1"); var ctx=dom.getConte
Math.cos()的使用说明
My Coding World
11-17 4365
下面的例子说明了如何使用lang.Math.cos()方法： import java.lang.*; public class MathDemo { public static void main(String[] args) { // get two double numbers double x = 45.0; double y = 180
canvas编写时钟
Lee_03280210的博客
11-18 225
var dum=document.getElementById('clock'); var ctx=dum.getContext('2d');//获取上下文context文件 var width=ctx.canvas.width;//获取宽度 var heigth=ctx.canvas.height;//获取高度 var r=width/2;//获取半径 var rem=width/200;//当
【STM32】系统时钟RCC详解(超详细，超全面)
热门推荐
Z小旋
08-08 21万+
1什么是时钟 时钟是单片机运行的基础，时钟信号推动单片机内各个部分执行相应的指令。时钟系统就是CPU的脉搏，决定cpu速率，像人的心跳一样 只有有了心跳，人才能做其他的事情，而单片机有了时钟，才能够运行执行指令，才能够做其他的处理 (点灯，串口，ADC)，时钟的重要性不言而喻。 为什么 STM32 要有多个时钟源呢？ STM32本身十分复杂，外设非常多 但我们实际使用的时候只会用到有...
时钟信号
weixin_43727437的博客
07-06 1万+
1、同步电路与异步电路 1.对于比较严格的定义：一个电路是同步电路，需要满足以下条件： （1）每一个电路元件是寄存器或者组合电路 （2）至少有一个电路元件是寄存器 （3）所有寄存器接收同一个时钟电路 （4）若有环路，则环路至少包含一个寄存器 2、对于不算很严格的同步电路定义有： （1）所有时钟的时钟来自同一个时钟源：比如下面的（分频电路） CLKA、CLKC、CLKD、CLKE都是由300M这个时钟源分频而来，因此这个系统属于同步电路系统。 （2）当不是来自同一个时钟源时，只要CLOCK的周期有倍数关系并
STM32系统时钟超详解
k666499436的博客
04-12 3万+
什么是时钟及作用，STM32四个时钟源，自己写系统时钟初始化函数实现超频
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
STM32-时钟系统详解
qq_44016222的博客
03-02 3万+
本节主要对STM32时钟系统进行讲解，我们从原理框图入手，对每一个时钟线路进行来源和去向的分析，介绍了时钟配置的相关寄存器以及STM32时钟的软件配置，最后通过SysTick定时器来编写延时函数。
PCIe Receiver内部恢复时钟与本地时钟
u013025045的专栏
02-19 6325
本文就PCIe Receiver内部恢复时钟与本地时钟之前的关系根据弹性缓冲的相关资料做一个浅显的学习整理，如有读者发现问题或错误，请慷慨指出，后期也会持续修正优化，谢谢！ 对于PCIe总线的数据传输，我们知道其相对于PCI和PCI-X并行总线的极大不同点是使用了点对点式的差分串行链路进行信号传输，信号上已经没有并行总线的同步时钟。但任何电路都需要时钟进行驱动，特别是总线信号，发送端需要时钟驱动打出信号，接收端则需要时钟采样信号，进而识别信息。 此处插入一个题外话：对于一些...
LVGL 7.8模拟时钟
mygod2008ok的专栏
12-13 7324
模拟时钟资源下载 链接：https://pan.baidu.com/s/1_nBFausDp_TqTG74boxFlw 提取码：mjdp 创建模拟时钟界面 /** * @brief 创建模拟时钟界面 */ void analog( lv_obj_t *win) { lv_obj_t* central = win; lv_obj_set_size(central, LV_HOR_RES_MAX, LV_VER_RES_MAX); lv_obj_set_pos(central, 0
FPGA时钟设计
01-19
在设计PLD/ FPGA 时通常采用如下四种类型时钟： 全局时钟、门控时钟、多级逻辑时钟和波动式时钟。多时钟系统包括上述四种时钟类型的任意组合。 　对于一个设计项目来说， 全局时钟是简单和可预测的时钟。在PLD/ ...
使用python实现时钟
05-08
使用python实现时钟
jquery时钟
03-27
时钟
自定义时钟
04-10
C#语言，winform下自己写的一个时钟工具，效果较好，支持缩放功能
门控时钟和使能时钟.pdf
04-15
门控时钟和使能时钟.pdf
verilog时钟
02-09
采用verilog语言，运行在FPGA上的时钟程序，包括小时、分钟、秒，进行计时、
时钟_matlab_时钟_
10-04
用matlab制作的时钟，有动态和静态两种。
北京时间极简桌面时钟.exe
03-14
极简时钟电脑版是一款实用的时钟工具， 极简时钟电脑版是款给用户带来闹铃服务的软件，这款应用有专业的时间，可以提供给用户更多服务，全面为用户带来闹钟的提醒服务，更好的为大家带来时钟的服务，这里面的服务...
ethercatdc时钟
最新发布
10-22
EtherCAT DC时钟是用于以太网通信和控制网络的一种特殊类型的时钟。它在EtherCAT网络中的从站设备之间传输同步和时间信息，确保数据的准确性和同步性。 与传统以太网相比，EtherCAT DC时钟能够提供更高的精度和可靠性。它通过在网络上使用专用的时钟分发和同步机制，确保各从站设备在执行控制任务时能够按照精确的时间步进进行操作。 EtherCAT DC时钟采用了主从架构，其中主时钟由EtherCAT主站设备提供，从站设备通过网络接收主时钟，并以该时钟作为参考来进行同步。在每个通信周期开始时，主站设备向从站设备发送同步信号，从站设备根据接收到的信号调整自身的时钟，使得各个从站设备的时钟保持同步。 通过使用EtherCAT DC时钟，可以实现高精度和高同步性的控制系统。因此，它在机器人控制、工业自动化和其他需要精确同步的应用中得到广泛应用。与传统的控制网络相比，EtherCAT DC时钟提供了更高的性能和灵活性，能够满足现代工业控制系统对精确和高效的要求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值