Html Canvas之动态表盘时钟（带数字刻度数）

最新推荐文章于 2024-07-02 22:34:09 发布
最新推荐文章于 2024-07-02 22:34:09 发布
阅读量2.2k 收藏 12
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Super_cute_/article/details/105248247
版权

Html Canvas之动态表盘时钟（带数字刻度数）

能够实现指针按标准时间走，并加入一个倒计时。
效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clock</title>
</head>
<body>
	<canvas id=mycanvas width=500 height=500 ></canvas>
	<script>
	var cav=document.getElementById("mycanvas");
	var cxt=cav.getContext("2d");

	function drawClock(){
		cxt.clearRect(0,0,500,500)

	var now=new Date()
	sec=now.getSeconds()
	min=now.getMinutes()
	hour=now.getHours()
	hour=hour+min/60
	hour=hour>12?hour-12:hour

	var endTime=new Date("2020/12/19 00:00:00"); 
	var second = parseInt((endTime.getTime()-now.getTime())/1000);
	var d = parseInt(second/3600/24); //天数
	cxt.fillStyle='red'
	cxt.font="15px 楷体"
	cxt.fillText("距2021年考研还剩: "+d+"天 ",160,330)		

	// 画表盘
	cxt.beginPath()
	cxt.strokeStyle='#999';
	cxt.lineWidth=1;
	cxt.arc(250,250,205,0,2*Math.PI,false)
	cxt.stroke()
	cxt.closePath()

	cxt.beginPath()
	cxt.strokeStyle='black';
	cxt.lineWidth=2;
	cxt.arc(250,250,190,0,2*Math.PI,false)
	cxt.stroke()
	cxt.closePath()

	// 画时刻度
	for(var i=0;i<12;i++){
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=2
		cxt.strokeStyle='black'
		cxt.rotate(i*30*Math.PI/180)
		cxt.moveTo(0,-190)
		cxt.lineTo(0,-170)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()
	}
	 // 画分刻度
	for(var i=0;i<60;i++){
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=1
		cxt.strokeStyle='black'
		cxt.rotate(i*6*Math.PI/180)
		cxt.moveTo(0,-190)
		cxt.lineTo(0,-180)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()
	}

    //表盘数字
	for(var i=0;i<12;i++){
		var num=[3,4,5,6,7,8,9,10,11,12,1,2]
         cxt.beginPath()
		 cxt.save()
		cxt.translate(235,265)
	    cxt.fillStyle='black'
	    cxt.font="50px 黑体"
		var x=Math.cos(2*Math.PI/12*i)*140;
		var y=Math.sin(2*Math.PI/12*i)*140;
		cxt.fillText(num[i],x,y)
	    cxt.stroke()
		cxt.restore()
		cxt.closePath()
    }

	// 画时针
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=5
		cxt.strokeStyle='black'
		cxt.rotate(30*hour*Math.PI/180)
		cxt.moveTo(0,-100)
		cxt.lineTo(0,10)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()

		// 画分针
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=3
		cxt.strokeStyle='black'
		cxt.rotate(min*6*Math.PI/180)
		cxt.moveTo(0,-130)
		cxt.lineTo(0,17)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()

		// 画秒针
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=1
		cxt.strokeStyle='red'
		cxt.rotate(sec*6*Math.PI/180)
		cxt.moveTo(0,-150)
		cxt.lineTo(0,25)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()

		// 画圆心
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=1
		cxt.strokeStyle='red'
		cxt.fillStyle="#ccc"
		cxt.arc(0,0,5,0,2*Math.PI,true)
		cxt.stroke()
		cxt.fill()
		cxt.restore()
		cxt.closePath()


		// 画秒针末端圆圈
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=1
		cxt.strokeStyle='red'
		cxt.fillStyle="#ccc"
		cxt.rotate(sec*6*Math.PI/180)
		cxt.arc(0,-120,5,0,2*Math.PI,true)
		cxt.stroke()
		cxt.fill()
		cxt.restore()
		cxt.closePath()
	}
		setInterval(drawClock,1000)

	</script>
	
	
</body>
</html>
倾_尘
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas绘制动态时钟
weixin_44049725的博客
12-26 273
使用元素不是非常难，但需要一些基本的HTML和JavaScript知识。 我们来利用canvas 画布元素和js结合绘制一个时钟，先上效果图： 画图之前，先把思路捋一遍：首先分解一下这个时钟的图形，它是由表盘（圆形）和指针（直线）组成。然后我们就按部就班一步一步进行绘制就可以了。 完整代码如下： <!DOCTYPE html> <html lang="en"> <h...
使用Canvas HTML5画出时钟
m0_65627447的博客
11-21 1015
HTML5 Canvas画时钟
基于Canvas的Html5多时区动态时钟实战
夜郎King的博客
07-02 3185
本文以Canvas为基础，支持多时区的多时钟的动态Web展示为例实现一种在Html5上的电子钟展示方法。通过本文可以了解Canvas的详细用法，掌握基本的文本绘制、样式控制、属性管理的基本知识。
canvas绘制表盘时钟
iunk的博客
02-26 244
canvas學習 先上效果圖吧，最後大擺錘有幾點不會實現，就用其他的頂替了一下下，嘿嘿。大擺錘的gif我放到下面了哈 <div class="container"> <div class="box"> <div class="img1"></div> <canvas id="canvas" width="375" height="650" style="margin: 0 auto;"></canva
使用canvas绘制一个动态的表盘
明皈依的博客
12-29 991
使用canvas绘制一个动态的表盘 技术要求 需要一点点数学基础 需要对 canvas 的常见的方法熟悉 一点点数学基础 角度转弧度的计算公式 canvas 常见的方法 菜鸟教程 扬帆起航 首先创建一个canvas ，并将这个dom添加在html中 方法名称：createCanvas // 创建一个 canvas circle const canvas = document.createElement('canvas'); // 防止一些浏览器不支持，给与提示 canvas.innerText
Html5基于Canvas画一个动态时钟
qq_35543489的博客
02-03 1397
文章目录前言一、前期准备二、绘制刻度1.流程2.效果图三、绘制文字1.流程2.效果图四、绘制指针1.取得当前时间2.绘制秒针3.绘制分针4.绘制时针5.效果图五、绘制圆心1.流程2.效果图六、让钟表动起来总结 前言 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。 一、前期.
html：canvas画布绘图简单入门-绘制时钟-3
彭世瑜的博客
01-01 1472
示例10：绘制时钟 <canvas id="canvas" width="600" height="600"></canvas> <script> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width
canvas绘制时钟刻度表
libinbin147256369的博客
05-05 2999
canvas绘制时钟刻度表1.首先看一下效果图2.基本知识点canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线canvas.drawLine:绘制线段，指定起始位置就好canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态canvas.restore:恢复到保存时候的canvas状态，这么...
canvas 画简易时钟 （钟表时钟+数字时钟同步显示）
MarkJunHao的博客
08-04 2719
这次跟大家分享的是一个用canvas写的简易时钟，话不多说，直接上效果图： 下面是具体的代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&
HTML5带表盘和数字刻度时钟代码
04-02
在这个“HTML5带表盘和数字刻度时钟代码”项目中，我们主要关注的是如何利用HTML5的Canvas元素来构建一个功能完备的时钟界面。 Canvas是HTML5中引入的一个重要绘图API，它允许开发者通过JavaScript来绘制图形。在这...
HTML5基于canvas实现的带表盘和数字刻度时钟特效源码.zip
11-04
在本案例中，我们探讨的是如何使用HTML5的Canvas元素来创建一个带有表盘和数字刻度的时钟特效。Canvas是HTML5中的一种绘图API，允许开发者通过JavaScript进行动态图形绘制。 首先，我们需要了解Canvas的基本用法。...
HTML5带表盘和数字刻度时钟特效代码
03-20
在本案例中，"HTML5带表盘和数字刻度时钟特效代码"是一个利用HTML5的Canvas元素来创建交互式时钟的示例。Canvas是HTML5中一个非常重要的特性，允许开发者在网页上绘制图形，实现动态和实时的视觉效果。 首先，让...
HTML5带表盘和数字刻度时钟代码.zip
11-18
在这个“HTML5带表盘和数字刻度时钟代码”的项目中，我们将深入探讨如何利用HTML5、CSS、JavaScript和jQuery来实现一个实时更新的时钟界面。 首先，HTML5是基础，它定义了网页的结构。在这个时钟项目中，HTML文件...
带表盘和数字刻度HTML5时钟代码
06-12
HTML5时钟是一种利用网页技术实现的实时时间显示工具...以上就是关于"带表盘和数字刻度HTML5时钟代码"的详细知识点介绍。这个项目结合了HTML5、CSS和JavaScript的核心特性，是一个很好的学习和实践Web前端开发的例子。
yolo-fastest.zip
07-28
yolo-fastest
mysql安装配置教程.pdf
最新发布
07-28
MySQL的安装配置教程可以细分为以下几个步骤，这里以Windows系统为例进行说明： 一、下载MySQL 1.访问MySQL官网： 1.前往MySQL的官方网站（https://www.mysql.com/）下载MySQL Community Server。 2.选择下载版本： 1.在官网的Downloads页面，选择“MySQL Community (GPL) Downloads”下的“MySQL Installer for Windows”。 2.跳过注册步骤，直接下载MySQL安装包。 二、安装MySQL 1.运行安装包： 1.找到下载好的MySQL安装包文件，双击运行。 2.选择安装类型： 1.在安装向导中，选择安装类型（通常建议选择“Custom”进行自定义安装）。 2.选择操作系统的位数（如64位），并勾选“Enable the Select Features...”等选项（如果提示缺少运行库，需要先安装相应的VC_redist）。 3.设置安装路径： 1.选择MySQL的安装路径和数据存储路径，建议将MySQL安装在非系统盘（如D盘）以避免潜在的问题。 4.设置密码：
基于transformers+pytorch实现非结构化商业文本信息中隐私信息识别python源码（比赛获奖项目）.zip
07-28
基于transformers+pytorch实现非结构化商业文本信息中隐私信息识别python源码（比赛获奖项目）.zip CCF大数据与计算智能大赛-非结构化商业文本信息中隐私信息识别方案 bert base + flat + crf + fgm + swa + pu learning策略 + clue数据集 = test1单模0.906 词向量：https://github.com/Embedding/Chinese-Word-Vectors SGNS(Mixed-large 综合) loss mask相关代码为pu learning策略的实现 主要模块版本 python 3.6.9 torch 1.1.0 transformers 3.0.2 pytorchcrf 1.2.0 torchcontrib 0.0.2 主要功能点 使用BERT base作为基础模型 采用flat结构进行命名实体识别 使用CRF层进行序列标注 采用对抗训练(FGM)和平滑权重平均(SWA)策略提高模型泛化能力 使用PU learning策略处理标注不全的数据 利用clue数据集进行训练
（verilog）基于MIPS指令集的单周期CPU设计
07-28
相关代码及Vivado项目工程文件
时钟tkinter 自己设置表盘指针刻度代码加详细注释
06-10
好的，以下是一个自己设置表盘指针刻度的Tkinter时钟代码，并加上详细注释： ```python import tkinter as tk from math import cos, sin, pi import time # 创建主窗口 root = tk.Tk() root.title("时钟") # 创建标签，用于显示时间 time_label = tk.Label(root, font=("Arial", 80)) time_label.pack() # 画表盘函数 def draw_clock(): # 获取画布大小 width = canvas.winfo_width() height = canvas.winfo_height() # 计算表盘半径和中心坐标 r = min(width, height) / 2 * 0.8 cx = width / 2 cy = height / 2 # 画表盘外圆 canvas.delete("clock") # 删除之前的表盘 canvas.create_oval(cx-r, cy-r, cx+r, cy+r, width=5, outline="black", tags="clock") # 画表盘刻度 for i in range(12): angle = pi / 6 * i # 计算刻度线的角度 x1 = cx + (r-20) * cos(angle) y1 = cy + (r-20) * sin(angle) x2 = cx + r * cos(angle) y2 = cy + r * sin(angle) canvas.create_line(x1, y1, x2, y2, width=5, tags="clock") # 画表盘指针 # 计算指针位置 now = time.localtime() hour_angle = pi / 6 * now.tm_hour + pi / 360 * now.tm_min minute_angle = pi / 30 * now.tm_min second_angle = pi / 30 * now.tm_sec hour_length = r * 0.5 minute_length = r * 0.7 second_length = r * 0.9 # 画指针 # 时针 x = cx + hour_length * sin(hour_angle) y = cy - hour_length * cos(hour_angle) canvas.create_line(cx, cy, x, y, width=10, fill="red", tags="clock") # 分针 x = cx + minute_length * sin(minute_angle) y = cy - minute_length * cos(minute_angle) canvas.create_line(cx, cy, x, y, width=5, fill="blue", tags="clock") # 秒针 x = cx + second_length * sin(second_angle) y = cy - second_length * cos(second_angle) canvas.create_line(cx, cy, x, y, width=2, fill="green", tags="clock") # 在1000ms后调用自身，实现更新表盘指针 canvas.after(1000, draw_clock) # 创建画布，用于画表盘 canvas = tk.Canvas(root, width=600, height=600) canvas.pack(expand=True, fill="both") # 在100ms后调用draw_clock()函数，实现画表盘和指针 canvas.after(100, draw_clock) # 运行主循环 root.mainloop() ``` 这个程序使用Tkinter创建一个窗口，通过Canvas组件画出时钟表盘和指针。程序分为两个主要部分：`draw_clock()`函数和主循环部分。 `draw_clock()`函数用于画表盘和指针，并且每秒钟更新指针位置。首先获取画布的大小，计算表盘半径和中心坐标，然后画出表盘外圆和刻度线。接着计算当前时间对应的指针位置，画出时针、分针和秒针。最后在1000ms后调用自身，实现每秒钟更新指针位置。 主循环部分首先创建画布，然后在100ms后调用`draw_clock()`函数，实现画出表盘和指针。最后运行主循环。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值