效果图

实现原理：

1.使用canvas绘制两个半圆弧，底图灰色半圆弧和颜色进度圆弧。

2.利用setInterval计时器，逐步改变颜色进度条，达到进度条的效果。

效果代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <canvas id="canvas" width="300" height="300">

  </canvas>

         <script type="text/javascript">

             function toCanvas(id, progress, progress2) {

                 //canvas进度条

                 var canvas = document.getElementById(id),

                     ctx = canvas.getContext("2d"),

                     percent = progress,

                     percent2 = progress2,

                     //最终百分比

                     circleX = canvas.width / 2, // 中心x坐标

                     circleY = canvas.height / 2, //中心y坐标

                     radius = 100, //圆环半径

                     lineWidth = 8, // 圆形线条的宽度

                     fontSize = 10; //字体大小

                 /*//两端圆点

                 function smallcircle1(cx, cy, r) {

                     ctx.beginPath();

                     ctx.lineWidth = 1;

                     ctx.fillStyle = '#06a8f3';

                     ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);

                     ctx.fill();

                 }

                 function smallcircle2(cx, cy, r) {

                     ctx.beginPath();

                     ctx.lineWidth = 1;

                     ctx.fillStyle = '#00f8bb';

                     ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);

                     ctx.fill();

                 }*/

                 //画圆

                 function circle(cx, cy, r) {

                     ctx.beginPath();

                     ctx.lineWidth = lineWidth;

                     ctx.strokeStyle = '#eee';

                     ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);

                     //ctx.arc(cx, cy, r, Math.PI * 2 / 3, Math.PI * 1 / 3);

                     ctx.stroke();

                 }

                 //画弧线

                 function sector(cx, cy, r, startAngle, endAngle, anti) {

                     ctx.beginPath();

                     ctx.lineWidth = lineWidth;

                     // 渐变色 - 可自定义

                     var linGrad = ctx.createLinearGradient(

                         circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY

                     );

                     linGrad.addColorStop(0.0, '#06a8f3');

                     linGrad.addColorStop(1.0, '#00f8bb');

                     ctx.strokeStyle = linGrad;

                     //圆弧两端的样式

                     ctx.lineCap = 'round';

                     ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100));

                     ctx.stroke();

                 }

                 //画弧线02

                 function sector2(cx, cy, r, startAngle, endAngle, anti) {

                     ctx.beginPath();

                     ctx.lineWidth = lineWidth;

                     // 渐变色 - 可自定义

                     var linGrad = ctx.createLinearGradient(

                         circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY

                     );

                     linGrad.addColorStop(0.0, '#06a8f3');

                     linGrad.addColorStop(1.0, '#00f8bb');

                     ctx.strokeStyle = linGrad

                     //圆弧两端的样式

                     ctx.lineCap = 'round';

                     ctx.arc(cx, cy, r * 3 / 4, Math.PI, Math.PI * (1 + endAngle / 100));

                     ctx.stroke();

                 }

                 //刷新

                 function loading() {

                     var percent3 = progress;

                     if(percent < percent2) percent = percent2;

                     if(process >= percent) clearInterval(circleLoading);

                     if(process2 >= percent) clearInterval(circleLoading);

                     //清除canvas内容

                     ctx.clearRect(0, 0, circleX * 2, circleY * 2);

                     //中间的字

                     ctx.font = fontSize + 'px April';

                     ctx.textAlign = 'center';

                     ctx.textBaseline = 'middle';

                     ctx.fillStyle = '#999';

                     ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY*4/5);

                     ctx.fillText("月度完成比",circleX, circleY);

                     //圆形

                     circle(circleX, circleY, radius);

                     //圆弧

                     sector(circleX, circleY, radius, Math.PI * 2 / 3, process);

                     sector2(circleX, circleY, radius, Math.PI * 2 / 3, process2);

                     //两端圆点

                     //smallcircle1(50 + Math.cos(2 * Math.PI / 360 * 120) * 100, 150 + Math.sin(2 * Math.PI / 360 * 120) * 100, 5);

                     //smallcircle2(50 + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * 100, 150 + Math.sin(2 * Math.PI / 360 * (120 + process * 3)) * 100, 5);

                     //控制结束时动画的速度

                     if(process < percent3) {

                         if(process / percent > 0.90) {

                             process += 0.30;

                         } else if(process / percent > 0.80) {

                             process += 0.55;

                         } else if(process / percent > 0.70) {

                             process += 0.75;

                         } else {

                             process += 1.0;

                         }

                     }

                     if(process2 < percent2) {

                         if(process2 / percent > 0.90) {

                             process2 += 0.30;

                         } else if(process2 / percent > 0.80) {

                             process2 += 0.55;

                         } else if(process2 / percent > 0.70) {

                             process2 += 0.75;

                         } else {

                             process2 += 1.0;

                         }

                     }

                 }

                 var process = 0.0;

                 var process2 = 0.0;

                 var circleLoading = window.setInterval(function() {

                     loading();

                 }, 20);

             }

             toCanvas('canvas', 50, 80);

         </script>

     </body>

 </html>

canvas_基于canvan绘制的双半圆环进度条的更多相关文章

  1. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  2. 写了一个基于React+Redux的仿Github进度条

    曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧. 但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美 ...

  3. 基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta htt ...

  4. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  5. 使用Java高速实现进度条

    基于有人问到如何做进度条,以下给个简单的做法: 主要是使用JProgressBar(Swing内置javax.swing.JProgressBar)和SwingWorker(Swing内置javax. ...

  6. Android 打造形形色色的进度条 实现可以如此简单

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重 ...

  7. Android_自定义进度条

    转载:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重复造轮子的 ...

  8. 使用Java快速实现进度条（转）

    基于有人问到怎样做进度条,下面给个简单的做法: 主要是使用JProgressBar(Swing内置javax.swing.JProgressBar)和SwingWorker(Swing内置javax. ...

  9. 一个简单、易用的Python命令行(terminal)进度条库

    eprogress 是一个简单.易用的基于Python3的命令行(terminal)进度条库,可以自由选择使用单行显示.多行显示进度条或转圈加载方式,也可以混合使用. 示例 单行进度条 多行进度条 圆 ...

随机推荐

  1. BZOJ 1227 虔诚的墓主人(离散化+树状数组)

    题目中矩形的尺寸太大,导致墓地的数目太多,如果我们统计每一个墓地的虔诚度,超时是一定的. 而常青树的数目<=1e5.这启发我们从树的方向去思考. 考虑一行没有树的情况,显然这一行的墓地的虔诚度之 ...

  2. bzoj4760[USACO2017 Jan]Hoof,Paper,Scissors

    题意:玩n次剪刀石头布,对方每次出什么已经知道了.你出的招数必须是连续的几段(不能超过k+1段),问你最多赢几次.(n<=100000,k<=20) 正常做法:f[i][j][k]表示前i ...

  3. cogs1667[SGU422]傻叉小明打字

    其实和CF498bName that Tune差不多 题意: 现在需要依次输入n个字符,第i个字符输入的时候有pi的概率输错,不论是第几次输入(0<=pi<=0.5).每输入一个字符的用时 ...

  4. 【bzoj1606】[Usaco2008 Dec]Hay For Sale 购买干草 背包dp

    题目描述 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛．他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草．  顿因有H(1≤H≤5000)包干草,每一包都有它的体 ...

  5. BFS的小结

    写这类搜索题.首先感觉要有个框架.比如我的框架对于BFS来说(对于DFS,我想有两个一个是递归版一个是栈版).这里是BFS小结.所以介绍一下BFS.我的框架.(也是搜集了网上许多神人的作品.) 1:节 ...

  6. BZOJ4200 & 洛谷2304 & UOJ132：[NOI2015]小园丁与老司机——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4200 https://www.luogu.org/problemnew/show/P2304 ht ...

  7. BZOJ4245 [ONTAK2015]OR-XOR 【贪心】

    题目链接 BZOJ4245 题解 套路① 位运算当然要分位讨论,高位优先 考虑在\(or\)下,如果该位为\(0\),则每一位都为\(0\) 套路② 我们选m段异或和,转化为\(m\)个前缀和的点,且 ...

  8. 从零开始学Linux系统（三）安装CentOS-7及软件包管理操作

    推荐博文: VirtualBox安装CentOS7步骤详解: https://my.oschina.net/AaronDMC/blog/840753 如何安装CentOS7字符界面 :http://b ...

  9. bzoj2083: [Poi2010]Intelligence test（二分+vector）

    只是记录一下vector的用法 v.push_back(x)加入x v.pop_back()弹出最后一个元素 v[x]=v.back(),v.pop_back()删除x,但是会打乱vector顺序 v ...

  10. bzoj1778: [Usaco2010 Hol]Dotp 驱逐猪猡（概率DP+高斯消元）

    深夜肝题...有害身心健康QAQ 设f[i]为到达i的概率,d[i]为i的度数. 因为无限久之后炸弹爆炸的概率是1,所以最后在i点爆炸的概率实际上就是f[i]/sigma(f[]) 列出方程组 f[i ...