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，闭合弧现在是透明的。

＆＃13;

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);

＆＃13;

body{background: #f3f5f6;}

＆＃13;

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

＆＃13;

Ps：我允许你处理0案例作为练习。

Answer 2

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

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/

进度圆与颜色之间的空格

2 个答案: