进度圆与颜色之间的空格

Question

我试图实现这种效果(蓝色和灰色之间的空格),就像附加的图像一样.那些就像两种颜色的边缘或两种颜色之间没有颜色.

但目前设法这个(没有空格).

function loadPieCircle() {
  var el = document.getElementsByClassName('chart'); // get canvas
  for (i = 0; i < el.length; i++) {
    var options = {
      percent: el[i].getAttribute('data-percent') || 25,
      size: el[i].getAttribute('data-size') || 220,
      lineWidth: el[i].getAttribute('data-line') || 15,
      rotate: el[i].getAttribute('data-rotate') || 0
    }
    var canvas = document.getElementById('canvas-' + i);

    if (typeof(G_vmlCanvasManager) !== 'undefined') {
      G_vmlCanvasManager.initElement(canvas);
    }

    var ctx = canvas.getContext('2d');
    canvas.width = canvas.height = options.size;

    el[i].appendChild(canvas);

    ctx.translate(options.size / 2, options.size / 2); // change center
    ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

    //imd = ctx.getImageData(0, 0, 240, 240);
    var radius = (options.size - options.lineWidth) / 2;

    var drawCircle = function(color, lineWidth, percent) {
      percent = Math.min(Math.max(0, percent || 1), 1);
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
      ctx.strokeStyle = color;
      ctx.lineCap = 'square'; // butt, round or square
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    };

    drawCircle('#555555', options.lineWidth, 100 / 100);
    drawCircle('#18aace', options.lineWidth, options.percent / 100);
  }
}
loadPieCircle();

.chart {
  position: relative;
  margin: 0 auto;
  width: 220px;
  height: 220px;
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

span.percentage_circle {
  color: #555;
  display: block;
  line-height: 38px;
  text-align: center;
  width: 220px;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 100;
  margin-left: 0px;
  padding: 72px 0px;
}

<div class="chart" data-line="25" data-percent="70">
  <span class="percentage_circle" id="percentage_circle-0">
    Module<br>
    <strong>13/20</strong>
  </span>
  <canvas id="canvas-0" class="canvas" height="220" width="220"></canvas>
</div>

它也可以在JSFiddle上找到.

Answer 1

这是我到目前为止所尝试的，希望有帮助。

function loadPieCircle() {
    var el = document.getElementsByClassName('chart'); // get canvas
    for (i = 0; i < el.length; i++) {
        var options = {
            percent:  el[i].getAttribute('data-percent') || 25,
            size: el[i].getAttribute('data-size') || 220,
            lineWidth: el[i].getAttribute('data-line') || 15,
            rotate: el[i].getAttribute('data-rotate') || 0
        }
        var canvas = document.getElementById('canvas-'+i);

        if (typeof(G_vmlCanvasManager) !== 'undefined') {
            G_vmlCanvasManager.initElement(canvas);
        }

        var ctx = canvas.getContext('2d');
        canvas.width = canvas.height = options.size;

        el[i].appendChild(canvas);

        ctx.translate(options.size / 2, options.size / 2); // change center
        ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

        //imd = ctx.getImageData(0, 0, 240, 240);
        var radius = (options.size - options.lineWidth) / 2;

        var drawCircle = function(color, lineWidth, percent, offset = 0) {
            percent = Math.min(Math.max(0, percent || 1), 1);
            ctx.beginPath();
            beginAt = offset;
            ctx.arc(0, 0, radius, beginAt, Math.PI * 2 * percent + offset, false);
            ctx.strokeStyle = color;
            ctx.lineCap = 'butt'; // butt, round or square
            ctx.lineWidth = lineWidth;
            ctx.stroke();
        };
        drawCircle('#555555', options.lineWidth, (100-options.percent-2)/100, Math.PI*(0.02025*options.percent));
        drawCircle('#18aace', options.lineWidth, options.percent / 100);
   }
}

这是 JSFiddle：https://jsfiddle.net/yogesh214/j2bpfkgd/1/