多个圆形进度条在向下滚动时变为活动状态

Question

我想在我的网页中放置四个不同的圆形进度条，它们将放置在一个特定的 div.Upon 滚动条上 div 我希望它们都同时处于活动状态并在指定的百分比。只有一个在工作 fine.How 我可以这样做吗？附上代码。

var ctx = document.getElementById('my_canvas').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 = 5;
  ctx.fillStyle = '#09F';
  ctx.strokeStyle = "#09F";
  ctx.textAlign = 'center';
  ctx.fillText(al + 'K TOURIST', cw * .5, ch * .5 + 2, cw);
  ctx.beginPath();
  ctx.arc(35, 35, 30, start, diff / 10 + start, false);
  /*ctx.arc(200,75,50,0*Math.PI,1.5*Math.PI);*/
  ctx.stroke();
  if (al >= 50) {
    clearTimeout(sim);
    // Add scripting here that will run when progress completes
  }
  al++;
}
var sim = setInterval(progressSim, 50);

<div id="first_progress">
  <canvas id="my_canvas" width="70" height="70" style="border:1px dashed #CCC;"></canvas>
</div>
<div id="second_progress">
  <canvas id="my_canvas2" width="70" height="70" style="border:1px dashed #CCC;"></canvas>
</div>

Answer 1

看来你只更新了一个 canvas。您需要使用两个不同的上下文来更新 canvas。或者您可以将进度条绘制成相同但更大的 canvas.

这个例子对使用四个没有帮助。您需要为每个条存储您知道的不同角度和进度，但它显示了如何更新示例中的两个。

希望一切顺利。 ps - 使用数组来存储 ctx 和值。这样就容易多了。

var ctx = document.getElementById('my_canvas').getContext('2d');
var ctx2 = document.getElementById('my_canvas2').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;

function progressSim(ctx, simInx) {
  diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
  ctx.clearRect(0, 0, cw, ch);
  ctx.lineWidth = 5;
  ctx.fillStyle = '#09F';
  ctx.strokeStyle = "#09F";
  ctx.textAlign = 'center';
  ctx.fillText(al + 'K TOURIST', cw * .5, ch * .5 + 2, cw);
  ctx.beginPath();
  ctx.arc(35, 35, 30, start, diff / 10 + start, false);
  /*ctx.arc(200,75,50,0*Math.PI,1.5*Math.PI);*/
  ctx.stroke();
  if (al >= 50) {
    clearTimeout(simInx == 1 ? sim1 : sim2);
    // Add scripting here that will run when progress completes
  }
  al++;
}
var sim1 = setInterval(progressSim, 50, ctx, 1);
var sim2 = setInterval(progressSim, 50, ctx2, 2);

<div id="first_progress">
  <canvas id="my_canvas" width="70" height="70" style="border:1px dashed #CCC;"></canvas>
</div>
<div id="second_progress">
  <canvas id="my_canvas2" width="70" height="70" style="border:1px dashed #CCC;"></canvas>
</div>

多个圆形进度条在向下滚动时变为活动状态

Multiple circular progress bar becoming active on scrolling down

javascript

html5-canvas

progress-bar