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>

Answer 2

如果要复制功能，则需要隔离变量。这样，您就可以拥有没有冲突的代码。

此函数接受2个参数，即Canvas的ID和要显示给它的百分比。 current_death = deaths[random(0,3)]和diff是不需要在两次调用之间持久保存的局部变量。

start

function progressSim(id, percent) {
  var ctx = document.getElementById(id).getContext('2d'),
      cw = ctx.canvas.width,
      ch = ctx.canvas.height,
      al = 0,
      sim = setInterval(progress, 25);
  function progress() {
    var start = 4.72,
        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 >= percent) {
      clearTimeout(sim);
      // Add scripting here that will run when progress completes
    }
    al++;
  };

}

progressSim('my_canvas1', 65);
progressSim('my_canvas2', 80);

Answer 3

一个非常简单的解决方案，我只复制了您的代码并进行了查找和替换，因此可以将其用于my_canvas2

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);

var ctx2 = document.getElementById('my_canvas2').getContext('2d');

var al2 = 0;
var start2 = 4.72;
var cw2 = ctx2.canvas.width;
var ch2 = ctx2.canvas.height;
var diff2;

function progresssim2() {
  diff2 = ((al2 / 100) * Math.PI * 2 * 10).toFixed(2);

  ctx2.clearRect(0, 0, cw2, ch2);
  ctx2.lineWidth = 7;
  ctx2.fillStyle = '#09F';
  ctx2.strokeStyle = "#09F";
  ctx2.textal2ign = 'center';
  ctx2.fillText(al2 + '%', cw2 * .5, ch2 * .5 + 2, cw2);
  ctx2.beginPath();
  ctx2.arc(80, 80, 70, start2, diff2 / 10 + start2, false);
  ctx2.stroke();
  if (al2 >= 45) {
    clearTimeout(sim2);
    // Add scripting here that will run when progress completes
  }
  al2++;
}
var sim2 = setInterval(progresssim2, 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>

这里其他可能有更雄辩的解决方法

HTML5 Canvas多圈子问题

3 个答案: