向下滚动

Question

我想在我的网页上放置四个不同的循环进度条，它将被放置在一个特定的div上。在该div上滚动我希望它们在同一时间处于活动状态并按指定的百分比完成。 只有一个工作正常。我怎么能这样做？这是附加的代码。

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

它似乎只更新一个画布。您需要使用两个不同的上下文更新两个画布。或者你可以将进度条绘制到相同但更大的画布上。

这个例子无助于使用四个。您需要为每个条形存储不同的角度和进度，但它会显示如何更新示例中的两个。

希望它成功。 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>