javascript - HTML5 Canvas 多圈问题

Question

我有这段代码显示一个带有 % 值的圆圈，我试图在它旁边添加另一个显示另一个 % 值的圆圈。

为此，我尝试添加另一个调用第二个 ID my_canvas2 的 JS 代码，但结果是一个带有递增 % 值且没有结尾的圆圈。

var ctx = document.getElementById('my_canvas1').getContext('2d');

var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;

function progressSim() {
  diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);

  ctx.clearRect(0, 0, cw, ch);
  ctx.lineWidth = 7;
  ctx.fillStyle = '#09F';
  ctx.strokeStyle = "#09F";
  ctx.textAlign = 'center';
  ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
  ctx.beginPath();
  ctx.arc(80, 80, 70, start, diff / 10 + start, false);
  ctx.stroke();
  if (al >= 65) {
    clearTimeout(sim);
    // Add scripting here that will run when progress completes
  }
  al++;
}
var sim = setInterval(progressSim, 25);

<canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas>

我见过一些类似的主题，其中问题是第一个圆圈的闭合路径，我已经尝试过了，仍然是同样的问题。感谢您的帮助。

Answer 1

试试这个。

function progressSim(ctx, al, start) {
  let cw = ctx.canvas.width;
  let ch = ctx.canvas.height;
  let diff;
  diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
  ctx.clearRect(0, 0, cw, ch);
  ctx.lineWidth = 7;
  ctx.fillStyle = '#09F';
  ctx.strokeStyle = "#09F";
  ctx.textAlign = 'center';
  ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
  ctx.beginPath();
  ctx.arc(80, 80, 70, start, diff / 10 + start, false);
  ctx.stroke();
}

function startProgress(canvas_id, progress_int_1, stop_at) {
  let ctx = document.getElementById(canvas_id).getContext('2d');
  // let start = 4.72;
  let al = progress_int_1;
  let start = 4.72;
  var sim = setInterval(function(){
    progressSim(ctx, al, start);
    al++;
    if (al >= stop_at) {
      clearTimeout(sim);
    }
  }, 25);
}

var progress_int_1 = 0;
var progress_int_2 = 0;
var sim1;
var sim2;
sim1 = startProgress('my_canvas1', progress_int_1, 50);
sim2 = startProgress('my_canvas2', progress_int_2, 80);

<canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas>