javascript - 进度圈，颜色之间有空格

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

这是一个简单的解决方案:

• 画出两条弧线，相互接触。
• 设置globalCompositeOperation你的上下文到 'destination-out'
• 在这些圆弧上画一条半径更大的闭合圆弧。 (下图绿色)

多亏了 gCO，闭合弧现在是透明的。

var ctx = canvas.getContext('2d');

function circleChart(perc) {
  var gap = 6;
  var rad = 85;
  var center = canvas.height / 2;
  var start = -Math.PI / 2;
  var end = start + Math.PI * (perc / 50);
  ctx.lineWidth = 25;
  
  ctx.clearRect(0,0,canvas.width, canvas.height);
  ctx.strokeStyle = '#555555';
  ctx.beginPath();
  ctx.arc(center, center, rad, start, end, true);
  ctx.stroke();

  ctx.strokeStyle = '#18aace';
  ctx.beginPath();
  ctx.arc(center, center, rad, start, end);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(center, center);
  ctx.arc(center, center, rad * 1.5, start, end, true);
  ctx.closePath();
  ctx.lineWidth = gap;
  ctx.globalCompositeOperation = 'destination-out';
  ctx.stroke();

  ctx.globalCompositeOperation = 'source-over';
}
inp.oninput = function(){circleChart(this.value)};
circleChart(75);

body{background: #f3f5f6;}

<input type="range" min="0.1" max="100" step=".5" value="75" id="inp"/>
<canvas id="canvas" width="220" height="220"></canvas>

Ps:我会让你处理 0 案例作为练习。