正文 

当前位置： 首页 > 源码 >

如何重新加载圆形进度条

     2023-02-16     148

关键词：

【中文标题】如何重新加载圆形进度条【英文标题】：how to reload a circular progress bar 【发布时间】：2015-12-09 21:59:58 【问题描述】：

我对画布以及如何创建圆形进度条进行了一些网络搜索，我得到了这个。我对在网上找到的代码片段进行了一些更改，但我无法再次重新加载循环路径。通过重新加载，我的意思是，当圆圈已满（一个完美的圆圈）时，我想再次绘制它。换句话说，我想在一个完整的旋转完成后再次重复绘制圆圈的过程。当我的变量触发器大于 100 时，我试图清除整个画布，但没有成功。有什么想法吗？

这是代码

function draw() 
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit()
        
        diff = ((time / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(trigger >= 100)
            ctx.clearRect(0, 0, cw, ch);
        
        time++;
    
    var trigger = setInterval(justdoit, 1000);

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>

函数draw在一个带有onclick="draw()"属性的按钮元素上调用；

【问题讨论】：

【参考方案1】：

我不确定这是否是您所追求的，我已将计时器分开用于圆圈的位置，因此您可以每 100 秒将位置重置为 0 而无需重置时间。

我改变了重要的事情：

添加了一个名为 pos 的新变量。

var pos = 0;

将diff 计算更改为使用pos。

diff = ((pos / 100) * Math.PI*2*10);

将 if 语句更改为每 100 秒将 pos 设置回 0 并清除圆圈。

if(time % 100 == 0)
    pos = 0;
    ctx.clearRect(0, 0, cw, ch);

使用time 增加pos。

pos++;

我还减少了示例中的计时器，这样我们就不必等待很长时间才能看到。 - 更改回1000 1 秒间隔setInterval(justdoit, 100);

function draw() 
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var pos = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit()
        
        diff = ((pos / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(time % 100 == 0)
            pos = 0;
            ctx.clearRect(0, 0, cw, ch);
        
        time++;
        pos++;
    
    var trigger = setInterval(justdoit, 100);

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>

【讨论】：

你比我领先一步！这正是我需要的，保持时间变量不变。非常感谢【参考方案2】：

最后一个'if'块是错误的。改用这个：

if(time >= 100)
    ctx.clearRect(0, 0, cw, ch);
    time = 0;

这只会让事情一遍又一遍地重复。希望这是您想要的。

完整的代码在这里（我通过将步骤等待时间从底部第二行的“1000”更改为“10”来加快速度）：

function draw() 
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit()
        
        diff = ((time / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(time >= 100)
            ctx.clearRect(0, 0, cw, ch);
            time = 0;
        
        time++;
    
    var trigger = setInterval(justdoit, 10);

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>

【讨论】：

是的，我现在唯一需要做的就是保持时间变量。谢谢:)

javaswing圆形加载进度条(代码片段)

查看详情

我想在 30 秒后重新启动一个圆形进度条

】我想在30秒后重新启动一个圆形进度条【英文标题】：Iwanttorestartacircularprogressbarafter30seconds【发布时间】：2022-01-0223:07:20【问题描述】：constuseProgress=(maxTimeInSeconds=30)=>const[elapsedTime,setElapsedTime]=useState(0);const[progress,setProgres 查看详情

如何更改圆形进度条的颜色？

】如何更改圆形进度条的颜色？【英文标题】：Howtochangecolorincircularprogressbar?【发布时间】：2011-07-1707:03:54【问题描述】：我在Android上使用循环进度条。我想改变它的颜色。我正在使用"?android:attr/progressBarStyleLargeInverse"风格。那... 查看详情

如何使用 Materialise 线性不确定进度条作为页面预加载器？

】如何使用Materialise线性不确定进度条作为页面预加载器？【英文标题】：HowtousetheMaterializelinearindeterminateprogressbarasapagepreloader?【发布时间】：2020-05-2316:36:15【问题描述】：我在个人项目中使用MaterializeFramework，我想创建一个加... 查看详情

如何创建圆形样式进度条

】如何创建圆形样式进度条【英文标题】：HowtocreateaCircularStyleProgressBar【发布时间】：2011-06-1918:24:09【问题描述】：我需要帮助来实现这样的循环进度条：我应该如何通过增加Value属性来实现Circle来填充？【问题讨论】：相关链... 查看详情

如何在android中实现材料设计圆形进度条

】如何在android中实现材料设计圆形进度条【英文标题】：Howtoimplementamaterialdesigncircularprogressbarinandroid【发布时间】：2015-01-0501:04:38【问题描述】：我想制作一个类似于InboxbyGmailandroid应用中的MaterialDesign圆形进度条。我如何实现... 查看详情

如何在kivy中制作圆形进度条？

】如何在kivy中制作圆形进度条？【英文标题】：Howtomakecircularprogressbarinkivy?【发布时间】：2018-11-0516:04:11【问题描述】：我想用kivy和python制作一个简单的圆形进度条。我搜索了在线文档和GitHub曲目，但没有找到解释循环进度条... 查看详情

纯css3实现圆形进度条动画

悄悄地，GIF格式的进度条已经越来越少，CSS进度条如雨后春笋般涌现。今天要介绍的这个CSS3进度条，效果和FlymeOS4上的加载动画一样。首先，来看下最终的效果：  查看详情

如何更改 QML Dial 中的圆形进度条？

】如何更改QMLDial中的圆形进度条？【英文标题】：HowchangecircularprogressbarinQMLDial?【发布时间】：2019-02-1420:53:02【问题描述】：我在QML拨号组件中更改进度条颜色时遇到问题。我尝试使用Canvas，但最后我什么也没做。有什么建议或... 查看详情

如何使用逆时针动画显示自定义圆形进度条？

】如何使用逆时针动画显示自定义圆形进度条？【英文标题】：HowtodisplaycustomcircularprogressbarwithAnti-Clockwiseanimation?【发布时间】：2014-07-0313:54:48【问题描述】：我正在使用与测验相关的应用程序。此处将显示自定义圆形进度条，... 查看详情

如何使用 Swift 在 UIView 中将圆形进度条居中？

】如何使用Swift在UIView中将圆形进度条居中？【英文标题】：HowcanIcentreacircularprogressbarinaUIViewusingSwift?【发布时间】：2020-09-0119:53:23【问题描述】：我很难确保圆形进度条始终位于与其关联的UIView的中心。这是正在发生的事情：... 查看详情

AngularJS - 进度条为 100% 后重新加载页面 5 秒

】AngularJS-进度条为100%后重新加载页面5秒【英文标题】：AngularJS-Reloadpage5secondsonceprogressbaris100%【发布时间】：2019-10-1801:38:26【问题描述】：我想在进度条达到100%后5秒后重新加载页面我的代码是：<!DOCTYPEHTML><!--/**jQueryFileUp... 查看详情

如何在Android中创建一个在其上旋转的圆形进度条？

】如何在Android中创建一个在其上旋转的圆形进度条？【英文标题】：HowtoCreateacircularprogressbarinAndroidwhichrotatesonit?【发布时间】：2014-02-1512:25:24【问题描述】：我正在尝试创建一个圆形进度条。这就是我想要实现的目标有一个灰... 查看详情

如何停止 Android webView swipeToRefresh 加载进度条？

】如何停止AndroidwebViewswipeToRefresh加载进度条？【英文标题】：HowtoStopAndroidwebViewswipeToRefreshloadingprogressbar?【发布时间】：2018-01-0115:41:10【问题描述】：注意：这个问题已经被问过here.，但没有得到任何答案，所以我决定用我的代... 查看详情

如何给progressbar圆形进度条设置颜色

参考技术AAndroid中ProgressBar自定义进度条的高度、颜色、圆角很多人知道怎么改颜色，可是改高度就是胡扯了，居然想通过maxHeight去改。准确方法在这里：下面这个改成了3－5个dp高度：首先是样式文件，这里定义高度：本回答被... 查看详情

我如何在我的异步任务类中使用圆形旋转进度条

】我如何在我的异步任务类中使用圆形旋转进度条【英文标题】：Howicanusecircularspinningprogressbarinmyasynctaskclass【发布时间】：2019-06-0221:46:09【问题描述】：我想在asynctask类中使用旋转进度条。下面是我的asynctask类代码。在我使用... 查看详情

Visual Basic 圆形进度条

...制作一个具有良好UI的软件，但我在VB方面并不专业......如何制作圆形进度条？举例【问题讨论】：见codeproject.com/Articles/30625/Circular-Progress-Indicator和codeproject.com/Art 查看详情

如何在notification中放入一个圆形的进度条

参考技术A先确定四分之一长度的具体位置，用标尺可以精确测量，标尺快捷键ctr+r确定之后，可以用选区工具或者钢笔（最终要转换为选区）框出范围，然后del键直接删除就可以了。 查看详情