Question

我正在尝试创建jQuery动画循环进度条，在圆圈内显示自定义文本。我想在进度结束时画一个小圆圈。

我使用以下脚本绘制循环进度条。

(function($){
$.fn.circleGraphic=function(options){
    $.fn.circleGraphic.defaults={
        color:'#F90',
        startAngle: 0,
        //endAngle:50
    };

    var opts = $.extend({},$.fn.circleGraphic.defaults,options);

    var percentage=this.html();
    var ID="c"+percentage+Math.random();

    this.append("<canvas id='"+ID+"'></canvas>");

    var canvas=document.getElementById(ID),
        context=canvas.getContext('2d');

    var Width = this.width();
    this.height(Width);
    var Height = this.height();

    canvas.width = Width;
    canvas.height = Height;

    var startAngle = opts.startAngle,
        endAngle = percentage/100,
        angle = startAngle,
        radius = Width*0.4;

    function drawTrackArc(){
        context.beginPath();
        context.strokeStyle = '#ECECEC';
        context.lineWidth = 5;
        context.arc(Width/2,Height/2,radius,(Math.PI/180)*(startAngle*360-90),(Math.PI/180)*(endAngle*360+270),false);
        context.stroke();
        context.closePath();
    }

    function drawOuterArc(_angle,_color){
        var angle = _angle;
        var color = _color;
        context.beginPath();
        context.strokeStyle = color;
        context.lineWidth = 10;
        context.arc(Width/2,Height/2,radius,(Math.PI / 180) * (startAngle * 360 - 90), (Math.PI / 180) * (angle * 360 - 90), false);
        context.stroke();
        context.closePath();
    }   

    function numOfPercentage(_angle,_color){
        var angle = Math.floor(_angle*100)+1;
        var color=_color;
        context.font = "50px fantasy";
        context.fillStyle = color;
        var metrics = context.measureText(angle);
        var textWidth = metrics.width;
        var xPos = Width/2-textWidth/2,
            yPos = Height/2+textWidth/2;
        context.fillText(angle+"%",xPos,yPos);
    }

    function draw(){
        var loop = setInterval(function(){
            context.clearRect(0,0,Width,Height);
            drawTrackArc();
            drawOuterArc(angle,opts.color);
            numOfPercentage(angle,opts.color);
            angle+=0.01;
            if(angle>endAngle){
                clearInterval(loop);
            }

        },1000/60);
    }
    draw();
    return this;
};
})(jQuery);

这是我的HTML代码

<div class="circleGraphic1 col-md-3 col-sm-6">75</div>
 <script>
 window.onload=function(){
    $('.circleGraphic1').circleGraphic();
 };
 </script>

它给我低于输出

但我期待这样的事情

我想在进度结束时添加小圆圈。

Answer 1

编辑：根据注释，更改函数以绘制多个圆形图。

要在最后绘制一个圆，您需要计算中心坐标。

angle这里将从0.01开始，以0.75结束。

(Width/2, Height/2)是大圈子的中心点。

function drawACircleInTheEnd(){
  let radians = angle * 2 * Math.PI;
  context.beginPath();
  context.arc(Width/2 + radius * (Math.sin(radians)), 
              Height/2 - radius * (Math.cos(radians)), 
              10, 
              0, 
              2 * Math.PI, 
              false);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#F90';
  context.stroke();
}

＆＃13;

(function($) {
  $.fn.circleGraphic = function(options) {
    $.fn.circleGraphic.defaults = {
      color: '#F90',
      startAngle: 0,
      //endAngle:50
    };
    $(this).each(function() {
      let $this = $(this)
      var opts = $.extend({}, $.fn.circleGraphic.defaults, options);

      var percentage = $this.html();
      var ID = "c" + percentage + Math.random();

      $this.append("<canvas id='" + ID + "'></canvas>");

      var canvas = document.getElementById(ID),
        context = canvas.getContext('2d');

      var Width = $this.width();
      $this.height(Width);
      var Height = $this.height();

      canvas.width = Width;
      canvas.height = Height;

      var startAngle = opts.startAngle,
        endAngle = percentage / 100,
        angle = startAngle,
        radius = Width * 0.4;

      function drawTrackArc() {
        context.beginPath();
        context.strokeStyle = '#ECECEC';
        context.lineWidth = 5;
        context.arc(Width / 2, Height / 2, radius, (Math.PI / 180) * (startAngle * 360 - 90), (Math.PI / 180) * (endAngle * 360 + 270), false);
        context.stroke();
        context.closePath();
      }

      function drawOuterArc(_angle, _color) {
        var angle = _angle;
        var color = _color;
        context.beginPath();
        context.strokeStyle = color;
        context.lineWidth = 10;
        context.arc(Width / 2, Height / 2, radius, (Math.PI / 180) * (startAngle * 360 - 90), (Math.PI / 180) * (angle * 360 - 90), false);
        context.stroke();
        context.closePath();
      }

      function numOfPercentage(_angle, _color) {
        var angle = Math.ceil(_angle * 100);
        var color = _color;
        context.font = "50px fantasy";
        context.fillStyle = color;
        var metrics = context.measureText(angle);
        var textWidth = metrics.width;
        var xPos = Width / 2 - textWidth / 2,
          yPos = Height / 2 + textWidth / 2;
        context.fillText(angle + "%", xPos, yPos);
      }

      function drawACircleInTheEnd() {
        let radians = angle * 2 * Math.PI;
        context.beginPath();
        context.arc(Width / 2 + radius * (Math.sin(radians)),
          Height / 2 - radius * (Math.cos(radians)),
          10,
          0,
          2 * Math.PI,
          false);
        context.fillStyle = 'white';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = '#F90';
        context.stroke();
      }

      function draw() {
        var loop = setInterval(function() {
          context.clearRect(0, 0, Width, Height);
          drawTrackArc();
          drawOuterArc(angle, opts.color);
          numOfPercentage(angle, opts.color);
          drawACircleInTheEnd();
          angle += 0.01;
          if (angle > endAngle) {
            clearInterval(loop);
          }

        }, 1000 / 60);
      }
      draw();
      return $this;
    })
  };
})(jQuery);

$('.circleGraphic').circleGraphic();

＆＃13;

.circleGraphic {
  width: 200px;
  height: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circleGraphic  col-md-3 col-sm-6">0</div>
<div class="circleGraphic  col-md-3 col-sm-6">50</div>
<div class="circleGraphic  col-md-3 col-sm-6">75</div>
<div class="circleGraphic  col-md-3 col-sm-6">100</div>

＆＃13;

jquery圆形进度条，小圆圈结束

1 个答案: