效果图

实现原理：

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. 【Docker 命令】- rmi命令

    docker rmi : 删除本地一个或多个镜像. 语法 docker rmi [OPTIONS] IMAGE [IMAGE...] OPTIONS说明: -f :强制删除: --no-prune : ...

  2. chrome extensions & debug

    chrome extensions & debug debug background.js debug popup.js debug content_script.js chrome.stor ...

  3. Delphi DBGridEH中，选中行、列、单元格

    // 新增行后,默认首列 procedure TForm1.ADOQuery1AfterInsert(DataSet: TDataSet);begin  with DBGridEh1 do  begi ...

  4. C语言指针【转】

    一.C语言指针的概念 在计算机中,所有的数据都是存放在存储器中的.一般把存储器中的一个字节称为一个内存单元,不同的数据类型所占用的内存单元数不等,如整型量占2个单元,字符量占1个单元等,在前面已有详细 ...

  5. P3986 斐波那契数列

    题目描述 定义一个数列: f(0)=a,f(1)=b,f(n)=f(n−1)+f(n−2) 其中 a,b均为正整数,n≥2 . 问有多少种 (a,b),使得 k 出现在这个数列里,且不是前两项. 由于 ...

  6. P1135 奇怪的电梯

    题目描述 呵呵,有一天我做了一个梦,梦见了一种很奇怪的电梯.大楼的每一层楼都可以停电梯,而且第i层楼(1<=i<=N)上有一个数字Ki(0<=Ki<=N).电梯只有四个按钮:开 ...

  7. BZOJ1010：[HNOI2008]玩具装箱——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1010 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行 ...

  8. BZOJ2795/2890/3647 [Poi2012]A Horrible Poem 【字符串hash】

    题目链接 BZOJ2795 BZOJ2890 BZOJ3647 题解 三倍经验! 我们要快速求区间最小循环节 我们知道循环节有如下性质: ①当\(L\)为循环节长度,那么\(s[l...r - L] ...

  9. MQ对比

    转:http://blog.csdn.net/linsongbin1/article/details/47781187 MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq. ...

  10. FreeRTOS - 调度器

    原文地址:http://www.cnblogs.com/god-of-death/p/6942641.html 绝大多数情况下,调度器的配置如下: 下面的说明基于上面的调度器配置: 如果有更高优先级的 ...