正文

使用canvas实现环形进度条

兔子先生  兔子先生  2022-09-07  500

关键词：

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <canvas id="pro" width="400" height="300"></canvas>
 9     </body>
10 </html>

js代码：

第一步：

var c=document.getElementById("pro"),
                    pro=0,
                    ctx=c.getContext("2d");
                    //画灰色的圆
                    ctx.beginPath();
                    ctx.arc(200,200,190,0,Math.PI*2);
                    ctx.closePath();
                    ctx.fillStyle='#e3eaf2';
                    ctx.fill();

效果图如下：

第二步：

function drawCricle(ctx,percent){
                        //画进度环
                        ctx.beginPath();
                        ctx.moveTo(200,200);
                        ctx.arc(200,200,190,Math.PI*0.8,Math.PI*(0.8+2*percent/200));
                        ctx.closePath();
                        ctx.fillStyle='#ff4b88';
                        ctx.fill();
                        
                        //画内填充圆
                        ctx.beginPath();
                        ctx.arc(200,200,175,0,Math.PI*2);
                        ctx.closePath();
                        ctx.fillStyle='#fff';
                        ctx.fill();
                    }
drawCricle(ctx,60);//执行这个函数

效果图如下：

第三步：让它动起来

function animate(){
                        requestAnimationFrame(function(){
                            pro=pro+1;
                            drawCricle(ctx,pro);
                            if(pro<60){
                                animate();
                            }
                        });
                    }

如果需加入百分比文字：

//将这段代码加到drawCricle函数里面
ctx.font = "bold 20pt Microsoft YaHei";   
                ctx.fillStyle = '#333';  
                ctx.textAlign = 'center';    
                ctx.textBaseline = 'middle';    
                ctx.moveTo(200, 200);    
                ctx.fillText(process + '%', 200, 200);

效果如下：

完整代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <canvas id="pro" width="400" height="400"></canvas>
 9         <script>
10             (function(){
11                 var c=document.getElementById("pro"),
12                     pro=0,
13                     ctx=c.getContext("2d");
14                     
15                     //画灰色的圆
16                     ctx.beginPath();
17                     ctx.arc(200,200,80,0,Math.PI*2);
18                     ctx.closePath();
19                     ctx.fillStyle='#f6f6f6';
20                     ctx.fill();
21                     
22                     function animate(){
23                         requestAnimationFrame(function(){
24                             pro=pro+1;
25                             drawCricle(ctx,pro);
26                             if(pro<60){
27                                 animate();
28                             }
29                         });
30                     }
31                     
32                     function drawCricle(ctx,percent){
33                         //画进度环
34                         ctx.beginPath();
35                         ctx.moveTo(200,200);
36                         ctx.arc(200,200,80,Math.PI*0.8,Math.PI*(0.8+2*percent/200));
37                         ctx.closePath();
38                         ctx.fillStyle='#ff9600';
39                         ctx.fill();
40                         
41                         //画内填充圆
42                         ctx.beginPath();
43                         ctx.arc(200,200,75,0,Math.PI*2);
44                         ctx.closePath();
45                         ctx.fillStyle='#fff';
46                         ctx.fill();
47                         
48                           //填充文字  
49                         ctx.font = "bold 20pt Microsoft YaHei";   
50                         ctx.fillStyle = '#333';  
51                         ctx.textAlign = 'center';    
52                         ctx.textBaseline = 'middle';    
53                         ctx.moveTo(200, 200);    
54                         ctx.fillText(pro + '%', 200, 200);  
55                     }
56                     animate();
57             }())
58         </script>
59     </body>
60 </html>

h5canvas实现圆形时间倒计时进度条(代码片段)

...需要准备静态html和需要引用的js文件即可，这次我们使用的静查看详情

h5canvas实现圆形时间倒计时进度条(代码片段)

...需要准备静态html和需要引用的js文件即可，这次我们使用的静查看详情

用svg实现一个环形进度条(代码片段)

svg实现环形进度条需要用到的知识：1、会使用path的d属性画一个圆环2、熟悉stroke,stroke-linecap,stroke-width,stroke-dasharray、stroke-dashoffset 话不多说，直接上代码<divstyle="width:200px;height:200px;"><svgviewBox="00100100">&l 查看详情

echarts实现环形进度条(代码片段)

效果图实现代码可直接复制运行：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>环形进度条</title> <scriptsrc="https://cdn.staticfile.org/echart 查看详情

利用clip-path实现环形进度条

...接：http://blog.csdn.net/angeljsl/article/details/51208960 使用SVGstroke-dasharray寥寥数行实现圆环loading进度效果，原文链接：http://www.zhangxinxu.com/wordpress/?p=4889 利用path元素，使用path指令绘制扇形，原文链接：http://www.tuicool... 查看详情

自定义圆环形进度条实现(代码片段)

最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情

怎样用div实现带百分百环形进度条

html5+javascript实现的圆形进度条，应该符合你要求源代码：http://blog.csdn.net/tangdou5682/article/details/52778766参考技术A1、html5直接就可用css3的属性去做圆形，border-radius即可实现圆角。2、图片形式，左右两侧做圆角图片，衔接好，即可... 查看详情

实现环形进度条的几种方法(代码片段)

环形进度条的问题，网上有很多的demo，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看SVG和Canvas的东西了，基础的拿来熟悉下。DIV+CSS3这个是最基本的实现方式... 查看详情

笔记canvas图片预加载及进度条的实现

/*star*loading模块*实现图片的预加载，并显示进度条*参数：图片数组对象，加载完成的回调函数*/functionloadImages(sources,callback){varloadedImages=0;varnumImages=0;ctx.font=‘14pxbold‘;ctx.lineWidth=5;varclearWidth=canvas.width;varclearHeigh 查看详情

css环形进度条

...中间定位一个白色的圆形做遮挡 4.完成另一半 5.使用animate配合时间完成衔接源码<!DOCTYPEhtml><html><head><metacharset="UTF-8">< 查看详情

html5动画：canvas实现圆形进度条并显示数字百分比

实现效果1.首先创建html代码<canvasid="canvas"width="500"height="500"style="background:#000;"></canvas>2.创建canvas环境varcanvas=document.getElementById(‘canvas‘),//获取canvas元素context=canvas.getContext(‘2d 查看详情

自定义圆环形进度条实现(代码片段)

一起talkandroid吧（第四百九十六回：自定义view实例二：环形进度条）

...代码各位看官们大家好，上一回中咱们说的例子是"如何使用Java版MQTT客户端",这一回中咱们说的例子是"自定义View实例二：环形进度条"。闲话休提，言归正转，让我们一起TalkAndroid吧！知识回顾看官们，我们又回到了自定义View相... 查看详情

使用 Canvas (Discord) 创建进度条

】使用Canvas(Discord)创建进度条【英文标题】：CreatingaprogressbarusingCanvas(Discord)【发布时间】：2021-04-1820:58:27【问题描述】：我正在尝试创建一个名为!rank的命令，它会显示等级卡、公会中的等级、他们拥有的经验、他们需要升级的... 查看详情

求教android半圆弧形的进度条问题

请问下，下面这种进度条该如何实现呢？全部进度为白色的环形，我希望在输入一个值时，在白色的环形处有一个渐变颜色的进度条出现，求教各位大神了，急急急！！！分数给的高高的。希望各位有相关demo的发我下或给个链... 查看详情

element-ui环形进度条设置大小

使用绑定 :width="20" :height="20" 这种方式直接写样式没有效果查看详情

delphi:圆形进度(环形进度)(代码片段)

...回DC5项目，资源下载美工提供圆形进度条，复习Delphi，为实现其颇觉有趣，遂研究其。最终效果图如下：实现：制作TCircleProgress控件，实现方法参照系统之TGauge控件，CSDN上tp机器猫一个源码，结合GDI+绘制技术实现。设计控... 查看详情

csssvg环形进度条-5(代码片段)

查看详情