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> 

Answer 2

如果要复制功能，则需要隔离变量。 这使您拥有无冲突的代码。

此函数接受两个参数，即画布的ID和要显示给它的百分比。 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); 

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

这里的其他人可能有一个更雄辩的解决方案