使用jquery-circle-progress绘制canvas渐变色环形进度条

2019 年 1 月 24 日 0 条评论 2.62k 次阅读 0 人点赞

先引入文件：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>

再创建html元素：
<div id="circle_step"></div>

根据元素的id选择器绘制进度条：

$('#circle_step').circleProgress({
  value: 0.98,//你需要展示的值，值从0.0到1.0，默认值为0
  size: 155,//环形图的大小，单位像素，默认值100
  startAngle:-1.57,//初始角度，默认值为-Math.PI
  reverse:false,//是否反向绘制圆弧和动画，默认值为false
  lineCap:'round',//圆弧的线头样式："butt"、"round"和"square"。默认值为"butt"
  thickness:20,//进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto
  emptyFill:'rgba(0, 0, 0, .1)',//空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
  fill: {
    //圆弧填充的配置。
//				-{ color: "#ff1e41" }
//				-{ color: 'rgba(255, 255, 255, .3)' }
//				-{ gradient: ["red", "green", "blue"] }
//				-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
//				-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
//				-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
//				-{ image: "http://i.imgur.com/pT0i89v.png" }
//				-{ image: imageInstance }
//				-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
//				默认值为{ gradient: ["#3aeabb", "#fdd250"] }
    gradient: ["#fece00","#ffa101"]
  }
}).on('circle-animation-progress', function(event, progress,stepValue) {//当图像正在绘制时的监听事件
  $(this).find('strong').html(String((stepValue*100).toFixed(2)) + '<i>%</i>');
});

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery-circle-progress使用</title>
  <style>
    .f-ongoing{color:#f60}
    .f-complete{color:#090}
    .circle_step_box{width:1200px;margin:0 auto;}
    .circle_step{width:155px;height:auto;float:left;margin-left:54px;cursor:pointer;}
    .circle_step>div{width:155px;height:155px;position:relative;}
    .circle_step>div>strong{font-size:26px;color:#4697f2;position:absolute;top:60px;text-align:center;display:block;width:100%;left:0;}
    .circle_step>div>strong>i{font-size:18px;}
    .circle_step.active>div>strong{color:#feab11;}
    .circle_step>p{font-size:16px;width:130px;text-align:center;margin:0 auto;margin-top:20px;color:#4697f2;}
    .circle_step.active>p{color:#feab11;}
    .tabscontent.mainDiv{background:#4696ef;width:100%;margin-top:55px;}
    .oimg_nav_box{width:1200px;margin:0 auto;}
    #oimg_nav{display:block;width:77px;margin-left:40px;}
  </style>
</head>
<body>

<!--环形进度条-->
<div class="circle_step_box">
  <div class="circle_step" state='1' press_name='circle_step1' style="margin-left:0;">
    <div id="circle_step1"><strong class="active"></strong></div>
    <p class="active">11111</p>
  </div>
  <div class="circle_step" state='-1' press_name='circle_step2'>
    <div id="circle_step2"><strong></strong></div>
    <p>22222</p>
  </div>
  <div class="circle_step" state='-1' press_name='circle_step3'>
    <div id="circle_step3"><strong></strong></div>
    <p>33333</p>
  </div>
  <div class="circle_step" state='-1' press_name='circle_step4'>
    <div id="circle_step4"><strong></strong></div>
    <p>44444</p>
  </div>
  <div class="circle_step" state='-1' press_name='circle_step5'>
    <div id="circle_step5"><strong></strong></div>
    <p>55555</p>
  </div>
  <div class="circle_step" state='-1' press_name='circle_step6'>
    <div id="circle_step6"><strong></strong></div>
    <p>66666</p>
  </div>
  <h6 class="clear"></h6>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<script>
  //初始化环形进度条
  function create_circle(num,val_num){
    if(num==1){
      $('#circle_step'+num).circleProgress({
        value: 0.98,//你需要展示的值，值从0.0到1.0，默认值为0
        size: 155,//环形图的大小，单位像素，默认值100
        startAngle:-1.57,//初始角度，默认值为-Math.PI
        reverse:false,//是否反向绘制圆弧和动画，默认值为false
        lineCap:'round',//圆弧的线头样式："butt"、"round"和"square"。默认值为"butt"
        thickness:20,//进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto
        emptyFill:'rgba(0, 0, 0, .1)',//空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
        fill: {
          //圆弧填充的配置。
//    -{ color: "#ff1e41" }
//    -{ color: 'rgba(255, 255, 255, .3)' }
//    -{ gradient: ["red", "green", "blue"] }
//    -{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
//    -{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
//    -{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
//    -{ image: "http://i.imgur.com/pT0i89v.png" }
//    -{ image: imageInstance }
//    -{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
//    默认值为{ gradient: ["#3aeabb", "#fdd250"] }
          gradient: ["#fece00","#ffa101"]
        }
      }).on('circle-animation-progress', function(event, progress,stepValue) {//当图像正在绘制时的监听事件
        $(this).find('strong').html(String((stepValue*100).toFixed(2)) + '<i>%</i>');
      });
    }else{
      $('#circle_step'+num).circleProgress({
        value: val_num,
        size: 155,
        startAngle:-1.57,
        reverse:false,
        lineCap:'round',
        thickness:20,
        fill: {
          gradient: ["#46ccf2","#4696ef"]
        }
      }).on('circle-animation-progress', function(event, progress,stepValue) {
        $(this).find('strong').html(String((stepValue*100).toFixed(2)) + '<i>%</i>');
      });
    }
  }
  create_circle(1,0.96);
  create_circle(2,0.75);
  create_circle(3,1);
  create_circle(4,0.96);
  create_circle(5,1);
  create_circle(6,1);
  //当鼠标点击环形进度条时
  //http://www.htmleaf.com/html5/html5-canvas/201505271918.html
  console.log(-Math.PI / 4 * 3);
  $('.circle_step').click(function(){
    if($(this).attr('state')=='1'){
      return false;
    }
    //将所有的状态归零
    var old=$('.circle_step[state="1"]').attr('state','-1').attr('class','circle_step').attr('press_name');
    $('#'+old).circleProgress({animation: false,fill: {  gradient: ["#46ccf2","#4696ef"]}});
    //新激活的进度条
    var press_name=$(this).attr('state','1').attr('class','circle_step active').attr('press_name');
    $('#'+press_name).circleProgress({animation:true,fill: {  gradient: ["#fece00","#ffa101"]}});
    //底部指针移动
    //$('#oimg_nav').css('margin-left',40+(press_name.split('circle_step')[1]-1)*209);
    //内容切换
    $('.table_show').eq(press_name.split('circle_step')[1]-1).fadeIn().siblings().fadeOut();
    //标题切换
    var table_title_arr=['11111','22222','33333','44444','55555','66666'];
    $('#table_title').html(table_title_arr[press_name.split('circle_step')[1]-1]);
  })
  //当鼠标进入环形进度条时
  $('.circle_step').mouseenter(function(){
    if($(this).attr('state')=='1'){
      return false;
    }
    var press_name=$(this).attr('class','circle_step active').attr('press_name');
    $('#'+press_name).circleProgress({animation: false,fill: {  gradient: ["#fece00","#ffa101"]}});
  })
  //当鼠标离开环形进度条时
  $('.circle_step').mouseleave(function(){
    if($(this).attr('state')=='1'){
      return false;
    }
    var press_name=$(this).attr('class','circle_step').attr('press_name');
    $('#'+press_name).circleProgress({animation: false,fill: {  gradient: ["#46ccf2","#4696ef"]}});
  })
</script>
</body>
</html>

效果如下：

DEMO 2

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 canvas带渐变色的圆形进度条动画</title>
  <style>
    /* These are just a test styles - you don't need them in your project */
    body {
      background-color: #444;
      padding-top: 40px;
      font: 15px/1.3 Arial, sans-serif;
      color: #fff;
      text-align: center;
    }

    a {
      color: orange;
    }

    .new-tab-link {
      padding-right: 14px;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggXDSIzCeRHfQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAA9SURBVBjTY2RAA/+XMvxHF2NkwAOwacCq4P9Shv8suFQzRiNsYUEXwKoJ2VhkNrIaJgYiAAs2N2BVRMirAD6JHi10MCdVAAAAAElFTkSuQmCC) no-repeat right center;
    }

    .page-title {
      font: 400 40px/1.5 Open Sans, sans-serif;
      text-align: center;
    }

    .circle {
      width: 100px;
      margin: 6px 6px 20px;
      display: inline-block;
      position: relative;
      text-align: center;
      line-height: 1.2;
    }

    .circle canvas {
      vertical-align: top;
    }

    .circle strong {
      position: absolute;
      top: 30px;
      left: 0;
      width: 100%;
      text-align: center;
      line-height: 40px;
      font-size: 30px;
    }

    .circle strong i {
      font-style: normal;
      font-size: 0.6em;
      font-weight: normal;
    }

    .circle span {
      display: block;
      color: #aaa;
      margin-top: 12px;
    }

    p {
      margin: 40px 0;
    }

    .install {
      margin: 50px 0;
    }

    .install code {
      padding: 6px 12px;
      display: inline-block;
      font: 13px/20px Courier New, Liberation Mono, monospase;
      background-color: #333333;
      border-radius: 4px;
      margin: 5px 0;
      white-space: nowrap;
    }

    .install a {
      display: inline-block;
      vertical-align: middle;
      padding: 6px 12px;
      line-height: 20px;
      background-color: #111;
      color: #fff;
      border-radius: 3px;
      text-decoration: none;
      margin: 5px 0;
      transition: all .3s;
    }

    .install a:hover {
      background-color: #222;
    }

    .credits {
      color: #aaa;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
    }

    .credits img {
      margin-left: 4px;
      border-radius: 4px;
      vertical-align: middle;
    }

    @media (max-height: 600px), (max-width: 480px) {
      .credits {
        position: inherit;
      }
    }
  </style>
  <link href="http://fonts.useso.com/css?family=Open+Sans:300" rel="stylesheet">
  <!--[if IE]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->
</head>
<body>
<div class="htmleaf-container">
  <header class="htmleaf-header">
    <h1>HTML5 canvas带渐变色的圆形进度条动画 <span>jQuery Plugin to draw animated circular progress bars</span></h1>

  </header>
  <div class="htmleaf-content">
    <div class="circles">
      <div class="first circle">
        <span>no <br/> animation</span>
      </div>

      <div class="second circle">
        <strong></strong>
        <span>animation <br/> progress</span>
      </div>

      <div class="third circle">
        <strong></strong>
        <span>value <br/> progress</span>
      </div>

      <div class="forth circle">
        <span>solid fill, <br/> custom angle</span>
      </div>

      <div class="fifth circle">
        <span>image fill, <br/> custom sizes</span>
      </div>
    </div>
    <div class="htmleaf-demo center">
      <a href="#" id="demo-reset">Reset</a>
      <a href="#" id="demo-play">Play</a>
    </div>
  </div>
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<script>
  /* Examples */

  /*
   * Example 1:
   *   - no animation
   *   - custom gradient
   *
   * By the way - you may specify more than 2 colors for the gradient
   */
  $('.first.circle').circleProgress({
    value: 0.35,
    animation: false,
    fill: { gradient: ['#ff1e41', '#ff5f43'] }
  });

  /*
   * Example 2:
   *   - default gradient
   *   - listening to `circle-animation-progress` event and display the animation progress: from 0 to 100%
   */
  $('.second.circle').circleProgress({
    value: 0.6
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
  });

  /*
   * Example 3:
   *   - very custom gradient
   *   - listening to `circle-animation-progress` event and display the dynamic change of the value: from 0 to 0.8
   */
  $('.third.circle').circleProgress({
    value: 0.75,
    fill: { gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4 }
  }).on('circle-animation-progress', function(event, progress, stepValue) {
    $(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
  });

  /*
   * Example 4:
   *   - solid color fill
   *   - custom start angle
   *   - custom line cap
   */
  $('.forth.circle').circleProgress({
    startAngle: -Math.PI / 4 * 3,
    value: .5,
    lineCap: 'round',
    fill: { color: '#ffa500' }
  });

  /*
   * Example 5:
   *   - image fill; image should be squared; it will be stretched to SxS size, where S - size of the widget
   *   - fallback color fill (when image is not loaded)
   *   - custom widget size (default is 100px)
   *   - custom circle thickness (default is 1/14 of the size)
   *   - reverse drawing mode
   *   - custom animation start value
   */
  $('.fifth.circle').circleProgress({
    value: 0.7,
    size: 60,
    thickness: 20,
    animationStartValue: 1.0,
    fill: {
      color: 'rgba(0, 0, 0, .1)', // fallback color when image is not loaded
      image: 'http://i.imgur.com/pT0i89v.png'
    },
    reverse: true
  });

  /*********鎸夐挳浜嬩欢********/
  $('#demo-reset').click(function(){
    $('.first.circle').circleProgress({
      value: 0
    });
    $('.second.circle').circleProgress({
      value: 0
    }).on('circle-animation-progress', function(event, progress) {
      $(this).find('strong').html(parseInt(0 * progress) + '<i>%</i>');
    });
    $('.third.circle').circleProgress({
      value: 0,
      fill: { gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4 }
    }).on('circle-animation-progress', function(event, progress, stepValue) {
      $(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
    });
    $('.forth.circle').circleProgress({
      startAngle: -Math.PI / 4 * 3,
      value: 0,
      lineCap: 'round',
      fill: { color: '#ffa500' }
    });
    $('.fifth.circle').circleProgress({
      value: 0,
      size: 60,
      thickness: 20,
      animationStartValue: 1.0,
      fill: {
        color: 'rgba(0, 0, 0, .1)', // fallback color when image is not loaded
        image: 'http://i.imgur.com/pT0i89v.png'
      },
      reverse: true
    });
  });

  $('#demo-play').click(function(){
    $('.first.circle').circleProgress({
      value: 0.35,
      animation: false,
      fill: { gradient: ['#ff1e41', '#ff5f43'] }
    });

    $('.second.circle').circleProgress({
      value: 0.6
    }).on('circle-animation-progress', function(event, progress) {
      $(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
    });

    $('.third.circle').circleProgress({
      value: 0.75,
      fill: { gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4 }
    }).on('circle-animation-progress', function(event, progress, stepValue) {
      $(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
    });

    $('.forth.circle').circleProgress({
      startAngle: -Math.PI / 4 * 3,
      value: .5,
      lineCap: 'round',
      fill: { color: '#ffa500' }
    });

    $('.fifth.circle').circleProgress({
      value: 0.7,
      size: 60,
      thickness: 20,
      animationStartValue: 1.0,
      fill: {
        color: 'rgba(0, 0, 0, .1)', // fallback color when image is not loaded
        image: 'http://i.imgur.com/pT0i89v.png'
      },
      reverse: true
    });
  });
</script>
</body>
</html>

配置参数
下面是该圆形进度条插件的一些可用参数：

参数 描述
value 这是唯一一个必填参数。值从0.0到1.0，默认值为0
size canvas的大小，单位像素，默认值100
startAngle 初始角度，默认值为-Math.PI
reverse 是否反向绘制圆弧和动画，默认值为false
thickness 进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto
lineCap 圆弧的线头样式："butt"、"round"和"square"。详细信息看这里。默认值为"butt"
fill 圆弧填充的配置。
-{ color: "#ff1e41" }
-{ color: 'rgba(255, 255, 255, .3)' }
-{ gradient: ["red", "green", "blue"] }
-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
-{ image: "http://i.imgur.com/pT0i89v.png" }
-{ image: imageInstance }
-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
默认值为{ gradient: ["#3aeabb", "#fdd250"] }
emptyFill 空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
animation 动画配置。可以参考jQuery animations。你可以设置为false来禁止动画。默认值：{ duration: 1200, easing: "circleProgressEase" }。"circleProgressEase"是一个ease-in-out-cubic easing动画效果
animationStartValue 默认进度条动画会在0.0开始，结束与value处。调用该参数可以直接动画。如果需要制作反向动画就将animationStartValue的值设置为1.0。你可以指定0.0到1.0之间的任何数值。默认值为0.0

事件
在允许进度条动画的情况下，有三个事件可用。

事件 处理程序
circle-animation-start： function(event)
-event - jQuery事件
circle-animation-progress function(event, animationProgress, stepValue)：
-event - jQuery事件
animationProgress - 从0.0到1.0
stepValue - 当前的步长值，从0.0到value
circle-animation-end function(event)：
-event - jQuery事件

其它
如果进度条组件已经被初始化，你可以获取<canvas>：

$('#circle').circleProgress({ value: 0.5 });
var canvas = $('#circle').circleProgress('widget');

你可以获取CircleProgress对象实例：

var instance = $('#circle').data('circle-progress');

如果进度条组件已经被初始化，你可以重新绘制已经存在的圆环：

$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});
$('#circle').circleProgress('redraw'); // use current configuration and redraw
$('#circle').circleProgress(); // alias for 'redraw'
$('#circle').circleProgress({ size: 150 }); // set new size and redraw

你可以改变默认的参数配置：

$.circleProgress.defaults.size = 50;

 

© 著作权归作者所有

雷雷

这个人太懒什么东西都没留下

文章评论（0）

(Spamcheck Enabled)