圆环钟表进度条

2023-10-13 12:10
文章标签 进度条 钟表 圆环

本文主要是介绍圆环钟表进度条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

圆环钟表进度条，根据不同的状态，画出不同的颜色来显示进度。

效果图 

  从10点34分33秒开始画。

实现思路

  •  通过canvas画图来实现这个效果。首先要知道这个函数 
    context.arc(x,y,r,sAngle,eAngle,counterclockwise);

  • 知道这个参数后，根据需求，要想画图首先得知道从什么地方开始画，计算得出，0-2Math.PI是一个整圆，那么2/12≈0.167，每小时就是0.167度。精确到秒就是再除以3600，≈0.0000464。因为它的0度是在我们3点整的地方，所以当我们计算出当前时间后要进行处理。

  • 有了开始的度数后，我们每个状态持续多少秒，我们就这个0.0000464*秒数然后进行绘画

    第一次
context.arc(x,y,r,开始度数,开始度数+0.0000464*多少秒,counterclockwise);

    每绘画一次就把这个度数累加一次。

    第二次
context.arc(x,y,r,开始度数,开始度数+0.0000464*多少秒,counterclockwise);
开始度数+=开始读书+0.0000464*多少秒

     

  •  最后进行镂空，因为我们画的圆是整圆，所以要进行镂空，其实就是在内部再画一个圆，把这个圆的背景色设置为我们需要的颜色就行了

 我的数据格式

var oldData = [{"status": 4,"time": ["10:34:33", "10:34:53"]},{"status": 4,"time": ["10:34:53", "10:40:13"]},{"status": 4,"time": ["10:40:13", "10:42:23"]},{"status": 4,"time": ["10:42:23", "10:42:33"]},{"status": 4,"time": ["10:42:33", "11:24:03"]},]

 全部代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>圆环进度</title>
<style>body{padding: 0;margin: 0;}.content{width: 300px;height: 100%; position: relative;text-align: center;}.procanvas{position: absolute;left: 20%;top: 15%;z-index: 100;}img{width: 190px;position: absolute;left: 78px;top: 17px;z-index: 111;}
</style>
</head>
<body><div class="content"><img src="../static/image/clock-background.png"><canvas id="myCanvas" class="procanvas" value="100%"></canvas></div>
</body>
<script src="./task/1.js"></script>
<script src="./task/2.js"></script>
<script type="text/javascript">//默认从0度开始，0度对一个的时间是3点整，0-2 是一个整圆，那么可以将其看为等分12份，其中按小时每小时约为0.167度。然后再除以3600，计算得出每秒约为0.0000464度；//其中12点之前，因为从3点开始所以，小时要减3;12点之后的1，2，3 对应的小时分别为 10,11,12;var time = new Date();let hour = 10 || time.getHours();let minutes = 34 || time.getMinutes();let second = 33 || time.getSeconds();if(hour == "12" || hour =="0" || hour == "00"){hour = (9*1+(minutes/60)*1+second/3600).toFixed(6);}else if(hour>12){let l = hour-12;//13,14,15if(l=="1"){hour = (10*1+(minutes/60)*1+second/3600).toFixed(6);}else if(l=="2"){hour = (11*1+(minutes/60)*1+second/3600).toFixed(6);}else if(l=="3"){hour = (12*1+(minutes/60)*1+second/3600).toFixed(6);}else{hour = ((hour-12-3)*1+(minutes/60)*1+second/3600).toFixed(6);}}else{if(hour>3){hour = ((hour-3)*1+(minutes/60)*1+second/3600).toFixed(6);}else{if(hour=="1"){hour=10;}else if(hour=="2"){hour=11;}else if(hour=="3"){hour=12}hour=(hour*1+(minutes/60)*1+second/3600).toFixed(6);}}console.log(hour);let stylewidth=225;let styleheight=225;var canvas = document.getElementById("myCanvas");var context = canvas.getContext('2d');var scale = 2;var center = [stylewidth/2*scale,styleheight/2*scale];canvas.style.width = stylewidth + "px";canvas.style.height = styleheight + "px";canvas.width = stylewidth*scale;canvas.height = styleheight*scale;var miao = 0.0000464; //每秒的度数，0.0000464；var xiaoshi = 0.167;  //每小时的度数var center = [225,225];////原始圆形context.beginPath();context.moveTo(center[0], center[1]);context.arc(center[0], center[1], center[0], 0*Math.PI*2, Math.PI*2, false);//设置圆弧的起始与终止点context.closePath();//创建渐变对象  渐变开始点和渐变结束点var g = context.createLinearGradient(0,0,180,0);  g.addColorStop(0, '#c4c4c4'); //添加颜色点g.addColorStop(1, '#c1c3c6'); //添加颜色点context.fillStyle = g;     context.fill();//--------------------------------------------------函数逻辑开始--------------------------------------------------function stageTime(begin,end){// console.log(begin.length);let shi,fen,miao=0;shi = begin.substr(0,2)*1;fen = begin.substr(3,2)*1;miao = begin.substr(6,2)*1;let b =shi*3600+fen*60+miao;shi = end.substr(0,2)*1;fen = end.substr(3,2)*1;miao = end.substr(6,2)*1;let e = shi*3600+fen*60+miao;console.log("历经",e-b);return e-b;}let timeList = oldData;let color=['red','green','blue'];let i=0;let n=xiaoshi*hour; //n为开始的度数；for(let s=0;s<oldData.length;s++){draw(i,n,stageTime(oldData[s].time[0],oldData[s].time[1])); //i 为颜色下标，n为开始的度数，第三个为持续的秒数;i+=1;if(i==color.length){i=0;};n+=miao*stageTime(oldData[s].time[0],oldData[s].time[1]);  //每画完一次就把n，以秒进行度数累加;console.log(n);}//重置覆盖函数setTimeout(() => {n = xiaoshi*hour;//重置时间i=0;let newTimeList = newData;  // console.log("合并后"+newTimeList);for(let s=0;s<newTimeList.length;s++){draw(i,n,stageTime(newTimeList[s].time[0],newTimeList[s].time[1]));i+=1;if(i==color.length){i=0;};n+=miao*stageTime(newTimeList[s].time[0],newTimeList[s].time[1]);  //每画完一次就按秒进行累加;累加度数;}}, 2000);//执行绘图函数function draw(i,n,stage){// console.log(i,n,stage);context.beginPath();context.moveTo(center[0], center[1]);context.arc(center[0], center[1], center[0], Math.PI*n,Math.PI*(n+miao*stage), false);//设置圆弧的起始与终止点// console.log(i+"*************"+Math.PI*n,Math.PI*(n+miao*stage)+"************"+stage);context.closePath();context.fillStyle = color[i];context.fill();}// 画内部空白context.beginPath();context.moveTo(center[0], center[1]);context.arc(center[0], center[1], scale*60, 0, Math.PI * 2, false);context.closePath();context.fillStyle = 'rgba(255,255,255,1)';context.fill();</script>
</html>

下载地址

git下载地址   传送门

csdn下载地址 传送门

这篇关于圆环钟表进度条的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/203132。

相关文章

C++实现百分号进度条的程序

C++实现百分号进度条的程序

#include<iostream>#include<Windows.h>//Sleep调用using namespace std;int main(){std::cout << "\n正在输出记录数据...... ";for( int i=0; i <= 100; i++ ) // 打印百分比 {std::cout.width(3);//i的输出为3位宽std::cout <<
阅读更多...
初识Linux · 进度条

初识Linux · 进度条

目录 前言： 1 缓冲区和回车换行 2 进度条 前言： 我们目前学习了些许知识，已经足够支持我们写一个非常非常小的项目了，即进度条，相信大家都有过下载游戏，等待游戏更新完成的时候，那么此时就有一个进度条，代表着游戏的更新进度，那么我们今天就来模拟实现这个过程，在此之前，我们需要一些预备知识。 1 缓冲区和回车换行 回车换行？是的，你没有看错，相信不少人对换行有一定的误解，我们
阅读更多...
【CSS渐变】背景中的百分比：深入理解`linear-gradient`，进度条填充

【CSS渐变】背景中的百分比：深入理解`linear-gradient`，进度条填充

在现代网页设计中，CSS渐变是一种非常流行的视觉效果，它为网页背景或元素添加了深度和动态感。linear-gradient函数是实现线性渐变的关键工具，它允许我们创建从一种颜色平滑过渡到另一种颜色的视觉效果。在本篇博客中，我们将深入探讨linear-gradient函数中的百分比值，特别是像#C3002F 50%, #e8e8e8 0这样的用法，以及它们如何影响渐变效果。 什么是linear-g
阅读更多...
Linux小程序——进度条

Linux小程序——进度条

预备知识 缓冲区 先看下面两段代码 int main(){printf("hello world\n");sleep(2);return 0;} int main(){printf("hello world");sleep(2);return 0;} 第一段代码会直接显示hello world，然后等待两秒，程序结束。第二段代码，则会先等待两秒，在显示hello world。
阅读更多...
【时间盒子】-【5.绘制闹钟】动态绘制钟表和数字时间

【时间盒子】-【5.绘制闹钟】动态绘制钟表和数字时间

Tips: @Preview装饰器，支持组件可预览； @Component装饰器，自定义组件； Canvas组件的使用； 使用RenderingContext在Canvas组件上绘制图形，请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontex
阅读更多...
Ajax实现一个简单的文件上传进度条

Ajax实现一个简单的文件上传进度条

Ajax实现一个简单的文件上传进度条功能。 1. HTML代码 <div class="form-group required"><label class="col-sm-3 control-label">文件名：</label><div class="col-sm-6"><input id="fileName" name="fileName" class="form-control" typ
阅读更多...
【matlab】进度条嵌入主GUI界面

【matlab】进度条嵌入主GUI界面

点击打开链接  暂未实验成功，博主本人也不确定是否可行！ 最近用到了waitbar，但是Matlab的waitbar总游离于主窗口之外，看起总是不是那么地爽于是想在论坛上找到把进度条嵌入到主GUI界面去的方法，不过没有找到现成的，只好自己动手了^_~ 在GUI主窗口找一个空地，放上一个axes，然后如下设置这个axes的参数属性： 'XLim',[0 100], 'YLim',[0 1
阅读更多...
windows安装TensorFlow时，进度条一直不动，最后失败的解决方案

windows安装TensorFlow时，进度条一直不动，最后失败的解决方案

如何在window上安装TensorFlow这里我就不赘述了，太多的教程了，在我安装的时候，老是出现这么一个问题，明明已经开始下载了，突然进度条不动了，然后一堆乱七八糟的报错。 着实有点让人无语了，看其他的人教程明明都可以的。于是我在想是不是网络的原因，是不是TensorFlow的whl文件太远了，所以需要fq。于是加了为cmd设置一个代理。（前提是要有代理服务器，有一台vps）
阅读更多...
自定义控件（1）---初探之不断闪烁的圆环

自定义控件（1）---初探之不断闪烁的圆环

小案例的原理： 1、new Thread(mCustomView).start(); 2、public class CustomView extends View implements Runnable 3、 <strong> public void run() {/*确保线程不断执行不断刷新界面*/while (true) {try {/*如果半径小于200则自加否则大于200后重置
阅读更多...
一款很实用的小demo 字母条索引+自定义进度条+listview/checkbox+长按多选+读取联系人\头像

一款很实用的小demo 字母条索引+自定义进度条+listview/checkbox+长按多选+读取联系人\头像

点击打开链接，免费下载demo代码 先贴上一张GIf动图（效果不是很理想，我是用的asm手机映射到电脑上的） 接下来就一步步简单的说下思路吧：action开始 void createTables(SQLiteDatabase db) { String sql = "CREATE TABLE IF NOT EXISTS " + TABLE_NAME_CONTACT +
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2